CSS 애니메이션 모음 AniCollection

CSS 애니메이션 모음 AniCollection

오늘은 CSS를 통해 다양한 효과를 줄 수 있는 오픈소스 AniCollection에 대해 알아보자.

요즘에는 예전처럼 완전 정적인 페이지보다는

조금 더 인터렉티브하고 역동적인 페이지들을 많이 볼 수 있다.

 

어떤 부분을 클릭하거나, 마우스를 올리거나, 페이지가 로딩될 때 등 다양한 움직임들이 있다.

 

예전에는 이러한 움직임들을 구현하기 위해서는

Javascript를 통해 하나하나 움직임을 조종?했다면

이제는 CSS만으로도 충분히 가능하다.

 

CSS를 통해 다양한 동적인 움직임을 구현하는 것이

처음에는 그렇게 쉽지만은 않을 것이다.

 

그래서 AniCollection이라는 오픈소스를 보며

실제로 적용해보고 분석해보며 적용해보자.

AniCollection은 여기서 살펴볼 수 있다.

 

기본적으로 제공하는 효과들을 바탕으로 본인들이 적절히 활용하여

본인이 개발하고자 하는 웹 페이지에 잘 녹여낸다면

충분히 퀄리티 있고, 있어보이는 페이지를 만들어낼 수 있을 것이다.

 

아래는 내가 간단하게 오픈소스를 적용해본 코드이다.

나는 오픈소스의 CSS 코드를 바탕으로 직접 적용해본 것이고,

편의에 따라 오픈소스 Javascript를 그대로 불러와서 사용해도 될 것이다.

 

어떻게 사용할지는 본인의 역량에 따라 적절히 활용하면 좋을 것이다.

 

* 오픈소스를 사용한다면, 단순히 사용만 하는 것이 아니라 구현된 내용도 한번씩 꼭 확인하며 공부도 해보자.

See the Pen anicollection by Seoungtae Kim (@seong954t) on CodePen.