[JavaScript] AOS - Animate On Scroll 사용하기

최근 스크롤 움직임에 따라 반응하는 웹사이트들이 많아 오랜만에 자바스크립트로만 작은 프로젝트를 진행하려고 한다.

해당 라이브러리를 이용하여 쉽게 스크롤 애니메이션을 주도록 해보자!

해당 공식문서를 읽고 싶다면 아래에 ⬇️
공식문서 : AOS.js 공식문서

---

1. 설치하기

yarn add aos
npm install aos --save
bower install aos --save

해당 프로젝트는 자바스크립트로만 진행하기에 아래와 같이 설치하도록 해줌

//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>

자바스크립트로 init()을 해줘야 동작한다.

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

2. data-aos 사용하기

data-aos-* 속성을 사용하여 동작을 조정한다.

<div 
    data-aos='fade-up'   // animation명
    data-aos-offset='200'  // animation 효과 시작 시, 위치 설정
    data-aos-delay='50'  // 재생 대기시간 (default:0)
    data-aos-duration='1000'  // 재생시간 (default:400)
    data-aos-easing='ease-in-out'  // 속도 설정 (default:ease)
    data-aos-mirror='true'   // 스크롤 동안 애니메이션 생성할지 설정(default:false)
    data-aos-once='false' // 스크롤 시 애니메이션이 재생될지 설정 (default:true)
    data-aos-anchor-placement='top-center' // animation이 어느 위치에서 적용될지 (default:top-bottom)
 >
 </div>

2-1. animation 종류

Fade animations

• fade
• fade-up
• fade-down
• fade-left
• fade-right
• fade-up-right
• fade-up-left
• fade-down-right
• fade-down-left

Flip animations

• flip-up
• flip-down
• flip-left
• flip-right

Slide animations
slide-up
slide-down
slide-left
slide-right

Zoom animations
zoom-in
zoom-in-up
zoom-in-down
zoom-in-left
zoom-in-right
zoom-out
zoom-out-up
zoom-out-down
zoom-out-left
zoom-out-right