[AOS]간단한 스크롤 모션에 좋은 라이브러리!

공식 사이트 : michalsnik.github.io/aos/ github : github.com/michalsnik/aos

사용방법이 매우 간단해 공식문서에 들어가면 금방 익힐 수 있습니다.

1. 적용하기

<!-- html -->

//css
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

//js
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

//INITIALIZE AOS //global세팅을 해줄수도 있습니다.
 AOS.init({
  // Global settings:
 })

2. 사용하기

1 ) 모션

-> 공식문서에 들어가 원하는 모션을 찾아 적용하면 됩니다.

2 ) api 보충설명

data-aos : 원하는 모션을 적어줍니다.

data-aos-offset : offset 을 적용해서 나타나는 시점을 조정 할 수 있습니다.

data-aos-anchor: anchor를 걸어, 어떤 객체를 기준으로 등장할지를 조정할 수 있습니다.

data-aos-easing : 빠르다 느리게  or 느리다 빠르게 or 일정한 속도로 등등을 설정할 수 있습니다.

data-aos-duration : 모션이 얼마만큼의 시간을 들여 작동하는지 조절할 수 있습니다.

data-aos-delay : delay를 통해 모션 등장을 늦출 수 있습니다.