반응형
기본적으로 스크롤 움직임에 따라 개체에 움직임을 주는 애니메이션의 경우 AOS 라이브러리를 사용하면 쉽게 애니메이션을 줄 수 있습니다. 제이쿼리 없이 사용되기 때문에 가벼운 편이라고 볼 수 있습니다.
AOS (Animate on Scroll)
AOS 소개 페이지
AOS - Animate on scroll library
AOS Animate On Scroll Library Scroll down
michalsnik.github.io
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의 경우 애니메이션이 비활성화된 디바이스의 경우 애니메이션이 아예 표시되지 않기 때문에 주의할 필요가 있습니다.
참고자료
반응형
'UX 개발 > UX - 스크롤 애니메이션' 카테고리의 다른 글
| 스크롤 애니메이션 연습 - HTML 요소에 스크롤 애니메이션 주기 (0) | 2024.06.25 |
|---|---|
| 자바스크립트로 스무스 스크롤(Smooth Scroll) 구현하기 (0) | 2024.06.24 |
| 초간단한 스크롤 패럴랙스 애니메이션 구현하기 (CSS, JS) (0) | 2024.06.23 |
| CSS만으로 초간단한 패럴랙스 효과 만들기 (0) | 2024.06.23 |
| 간단한 스크롤 내비게이션 만들기 (CSS+JS) (0) | 2024.06.10 |
