본문 바로가기

분류 전체보기10

[웹애니메이션] anime.js 튜토리얼 Document anime.js 웹 애니메이션과 anime.js anime.js는, CSS를 주로 다루는 사람들에게 친숙한 구문으로 DOM을 조작해 웹 애니메이션을 구현하는 라이브러리입니다. 웹 애니메이션은 크게 2가지로 나눠볼 수 있는데, 과 입니다. 일반적으로 사용자는 정지 화면보다 움직이는 화면에서 정보를 더 잘 얻는다고 합니다. 따라서 UI/UX 애니메이션을 추가하면, 사용자가 Web사이트를 탐색하거나 특정 작업을 수행하는 과정을 도울 수 있습니다. 한편, 독립 애니메이션은 사이트의 컨셉을 표현하기 위해 사용합니다. CSS3가 나온 지금, 간단한 인터랙션은 CSS만으로 표현할 수 있고 분기가 없는 애니메이션이라면(로딩 애니메이션 등) CSS로 충분히 표현 가능합니다. 대신 관리가 어렵고, 브라우저.. 2018. 4. 25.
Snap.svg (포스팅 테스트 중!) Document Snap.svg 평소 공부해야지 아미루고미루던 SVG! 를 웹 애니메이션에 써먹어 보고 싶기 때문에, 이번 포스트는 Snap.svg에 대한 탐구입니다 :-9 왜 라이브러리를 쓸까? SVGDOM은 SVG문서를 프로그램으로 조작하기 위한 api를 규정한 것입니다. HTML5를 지원하는 브라우저라면 이 SVGDOM을 지원하고 있으므로, JS를 가지고 SVG 그래픽을 그릴 수 있습니다....만. 굳이 왜 라이브러리를 쓰냐 하면은, 너무 복잡하거든요. 예를 들어, 직접 SVGDOM을 조작하려면 10줄이나 되는 코드를 써야 하는데, Snap.svg를 통하면 1줄이면 됩니다. 또한 다른 라이브러리와 비교하면 Snap.svg는 좀 더 쉽게 SVG를 다룰 수 있다고 합니다. 아무튼 유지보수 측면도 있고 .. 2018. 4. 18.