본문 바로가기
디자인 개발/JS (Motion)

간단한 웹스크롤애니메이션 라이브러리 AOS

기본적으로 스크롤 움직임에 따라 개체에 움직임을 주는 애니메이션의 경우 AOS 라이브러리를 사용하면 쉽게 애니메이션을 줄 수 있습니다. 제이쿼리 없이 사용되기 때문에 가벼운 편이라고 볼 수 있습니다.

 

 

AOS (Animate on Scroll)

AOS 소개 페이지

AOS

 

AOS - Animate on scroll library

AOS Animate On Scroll Library Scroll down

michalsnik.github.io

AOS 깃헙 페이지

michalsnik/aos

 

michalsnik/aos

Animate on scroll library. Contribute to michalsnik/aos development by creating an account on GitHub.

github.com

이외에도 wow.js도 자주 사용됩니다. 또한 animate.css를 활용해서 직접 스크롤 이벤트를 잡거나 아니면 다른 스크롤 이벤트 라이브러리를 활용해서 애니메이션을 부여하는 방법도 있습니다만, 이 경우 조금 더 많은 커스텀이 필요합니다. wow.js도 좋은 라이브러리이지만, 개인적으로 느끼기에 좀 더 효용이 높은 효과를 제공하고 적절한 옵션을 함께 제공하는 것은 AOS라고 개인적으로 판단하여 이를 선호하는 편입니다.

다만 animate.css의 경우 애니메이션이 비활성화된 디바이스의 경우 애니메이션이 아예 표시되지 않기 때문에 주의할 필요가 있습니다.

참고자료

AOS

cferdinandi/smooth-scroll

wow.js - Reveal Animations When Scrolling