[JS]AOS 사이트에서 여러 효과 이용하기

AOS 사이트 https://michalsnik.github.io/aos/ 에서 간단하고 자주 쓰이는 JS효과들을 쉽게 이용해보자.

Fade, Flip, Zoom과 같이 가벼운 움직임을 통해 사이트에 생동감을 불어넣을 수 있다. 또한 duration을 통해 속도를 조절할 수도 있다. 사이트 내에 들어가면 어떻게 작동하는지 바로 샘플로 보여줘서 감을 잡기 쉽다.

 

맨 아래쪽에서 다운로드 클릭, 이후 받은 알집 파일 중에서도 dist 폴더 내에 있는 aos라는 이름을 가진 css파일과 js 파일을 각각 작업 중인 폴더에 넣어준다. 이후 이 둘을 모두 html에 link를 통해 연결해주고, html의 <script> 부분 맨 위쪽에  AOS.init();라고 한 줄 적어두면 세팅 완료. 

 

이제 효과를 적용하고 싶은 부분에 샘플에 나온 코드대로 원하는 효과를 태그 내에 넣어주면 된다.

 

ex)

<div class="title" data-aos="fade-left" data-aos-duration="1500">

이런 식으로 div나 다른 태그의, class 바깥쪽에 넣어주면 바로 적용이 된다.