좌우로 움직이는 뱃지 애니메이션

좌우로 움직이는 뱃지 애니메이션(?)

딱히 뭐라고 불러야 할지 모르겠어서 이렇게 제목을 적었다

회사에서 두가지 타입의 컨텐츠를 번갈아 가면서 보여줘야하는 페이지에 사용했던 애니메이션

처음에 기획을 보고 좌절했지만 기획자님이 원하는 동작을 애프터이펙트로 만들어 보여주셔서 그나마 기획에 맞게 만들 수 있었다

css를 이용해서 만들었고 active클래스를 토글하는 방식으로 애니메이션을 줬다

단점은, 두가지 타입만 보여줄 수 있다는....확장이 안되는 너무 큰 단점이 ㅠㅠ

실제 사이트에선 좌우로 한번씩 이동할 때마다 예제의 텍스트 영역에 odometer.js를 사용해서 숫자를 돌리는 애니메이션이 있고, 하단에 글이 써질 때마다 알림텍스트가 아래에서 위로 flip되는 애니메이션까지 들어있다

하지만 odometer.js가 무거운건지 데이터가 너무 많은건지... 페이지가 매우 느립니다 ㅠㅠ 로딩 속도가 ㅠㅠ흑흑..

회사에선 less를 사용하기 때문에 애니메이션을 만들 때 복잡하지 않았는데 css로 만드려고 하니까 조금은 복잡한 것 같다

---

초보 퍼블리셔의 공부정리 블로그입니다.

내용에 오류가 있거나 수정사항이 있다면 꼭 댓글 부탁드립니다