애니메이션
-
Velocity.js: 스프라이트 이미지로 게임 만들기 :: 마이구미Javascript 2017. 12. 16. 23:57
이 글은 Velocity.js 을 통해 스프라이트 이미지를 조작해본다.Velocity.js 는 애니메이션을 보다 쉽게 구현하고, 빠른 성능을 낼 수 있는 라이브러리다.Velocity.js 의 기본적인 사용법을 알리기 위해 만든 예제이다.Velocity.js 사용 예제 - https://codepen.io/mygumi/pen/baGVRWVue.js 버전 예제 - https://codesandbox.io/s/vj2ymr9p2y공식 사이트 - http://velocityjs.org/ Velocity.js 는 무엇인가? jQuery의 $.animate() 와 동일한 API를 사용하는 애니메이션 엔진이다.jQuery와 함께 사용할 수도 있지만, 독립적으로 사용할 수도 있다. 오래 전부터 $.animate() 와 ..
-
translate() vs positioning 비교 :: 마이구미HTML, CSS 2017. 10. 24. 21:06
이 글은 css의 translate()와 top/left 와 같은 positioning을 비교한다. 지금까지 요소를 이동시킬 때, 두가지 방식을 활용하고 있다. 두가지 방식은 성격자체가 다르기 때문에, 차이점을 분명히 인지해야한다. 결론부터 말하고자 한다면, 이동에 있어서는, translate()를 사용하는 것이 효율적이다. 참고한 글을 통해 예제를 확인할 수 있다. Why moving elements with translate is better than position abs top/left? transform 속성의 경우에는 좌표 공간을 변형하여 다른 요소에 영향을 미치지 않고 위치를 변경하는 것이고, position의 경우에는 말 그대로, 위치시킨다는 의미로 생각하면 된다. 차이점은 다음 그림을 통..