본문 바로가기

애니메이션2

pixi.js - 웹에서 쉽게 애니메이션 구현하기 플래시를 대체한다고 해야 할까... 웹에서 Canvas 위에 각종 애니메이션을 쉽게 구현하게 해주는 툴? The HTML5 Creation Engine. Create beautiful digital content with the fastest, most flexible 2D WebGL renderer. 나도 아직 많이 써보진 못해서 설명은 조금 어려우나 데모들이나 실제 사용중인 사이트들의 결과물을 보면 대단한 넘인 걸 느낄 수 있음 HTML5로 게임을 만들거나, 애니메이션을 만들거나, 기능성 배너를 만들거나 그 외 여러가지 활용도가 있음 (예전에 플래시로 할 수 있는 건 거의 다 가능한 듯) html + css + js 로 할 수 있는 그 이상의 것들... (꼭 이상이 아니라도 좀 더 편하게...) 구현.. 2020. 8. 10.
CSS - rotate 좌우/상하 뒤집기 (3D) CSS가 하도 좋아져서 다양한 애니메이션도 가능한데 항상 문제는 브라우저 호환! 마우스 올리면 휘릭 뒤집는건 rotateX 나 rotateY를 써서 쉽게 했는데.. 3D 로 보여지게 하려니 손이 좀 가고.. 특히 그냥 뒤집기만 하는게 아니라 뒤집으면서 뒷면에 있는게 앞으로 나오는 식으로 하려니 손이 더 가고.. 다 해놓고 보니 Edge 에선 뒷면이 안나오네! 그래서 알아보니 판을 통체로 하나만 돌리면 안되고 앞면 뒷면을 동시에 돌려줘야 한다니... 아래는 예시: (Result 탭을 눌러보자) https://jsfiddle.net/alikong/ac5ghs6p/ 암튼 해결! 2020. 8. 4.