AOS

1. 제일 하단으로 내려간다.
2. DOWNLOAD 버튼을 눌러 zip파일을 다운로드 받는다.
3. 압축을 푼 후 폴더 내 dist에 들어가서 aos.css 파일은 자신의 프로젝트 폴더 내 css폴더로, aos.js 파일은 js폴더로 각각 복사해 넣고 정리한다.

css

<link href="css/aos.css" rel="stylesheet">

js

<script src="js/aos.js"></script>

1. css link코드는 상단에 본인이 작성한 style.css 위쪽에 연결, javascript코드는 body태그의 가장 아래에 붙여넣기 한다.

2. INITIALIZE AOS 의 코드를 아까 연결한 js script 코드 아래 붙여넣기 한다.

   ! slick 등 슬라이드 스크립트 아래에다가 실행 구문을 써주세요

   <script>
     AOS.init();
   </script>
   

AOS 사용법

AOS 파일들을 다 연결하고, 함수까지 실행을 시켰다면(4번) 이제 HTML 상에서 AOS 명령어를 사용해 원하는 애니메이션을 지정해줘야 합니다.

<div class="box" data-aos="fade-up"></div>

이렇게 원하는 HTML 요소에게 data-aos 속성을 사용하여 원하는 형태의 애니메이션을 설정합니다.

추가적으로 원하는 옵션이 있을 경우, 설정해줍니다.

애니메이션 속도 조절

<div class="box" data-aos="fade-up" data-aos-duration="3000"></div>

data-aos-duration=”” 원하는 애니메이션 속도를 지정