AOS(Animate On Scroll Library) 사용법

저번에 "프론트엔드 개발자에게 추천하는 사이트 모음 (특히 뉴비)” 글에서 AOS라는 라이브러리를 소개해 드린 적이 있습니다.

정말 좋은 라이브러리라 간단하게 소개하고 넘어가는 것이 아닌 사용법과 간단한 팀 몇 가지를 공유해 드리고 싶어 다시 가져와봤습니다.

개인적으로 라이브러리를 가져와 사용할 때 가장 중요다고 생각되는 점은 순서대로 성능, 충돌 여부, 무게입니다.

AOS는 위 3가지 조건을 모두 만족하면서 사용법 또한 간단합니다.

---

AOS 사용법:

See the Pen Untitled by 이종원 (@orugpbqu-the-solid) on CodePen.

---

응용:

1. 페이지 들어가자마자 컨텐츠 올라오는 인터렉션 주기.

See the Pen Untitled by 이종원 (@orugpbqu-the-solid) on CodePen.

 

2. 회오리 순서대로 보이게 하기

See the Pen Untitled by 이종원 (@orugpbqu-the-solid) on CodePen.

---

그 외 자잘한 팁:

1. 저는 보통 duration을 1000 정도 줍니다. 1초이지요.
   한국인 속도에 맞게 가끔 700이나 느긋한 무드의 사이트는 1500도 주고는 합니다.
2. “페이지 들어가자마자 컨텐츠 올라오는 인터렉션 주기”를 보면 data-aos-offset="-1000"를 준 것을 볼 수 있습니다.
   이유는 가끔 발생하는 다른 보이지 않는 요소와 충돌, 다른 라이브러리와 충돌, 반응형 시 하단 요소 로딩 시 불러오지 않음 등의 이유로 화면을 열자마자 보여야 하는 컨텐츠는 offset을 -1000을 줘서 무조건 보이게 합니다.
3. 꼭 메인 컨텐츠에만 주는 것이 아니라 메인 컨텐츠는 가만히 두고 주위에 둥둥 떠다니는 도형이나 GIF에 주면 아주 손쉽게 있어 보이는 효과를 줄 수 있습니다.