AOS(Animate On Scroll)

누구나 한번쯤은, 아니면 매일 웹페이지의 스크롤을 내릴꺼라고 생각합니다. 그리고 많은 웹페이지에서 스크롤의 위치에 따라서 요소들이 움직이는 애니메이션을 구현해놓곤 합니다. 이를 쉽게 해줄 수 있는 JS라이브러리. AOS입니다.
일반적인 JS로도 스크롤 애니메이션을 구현할 수 있지만, AOS의 장점은 자바스크립트에 대해 깊게 알지 못해도 쉽게 사용할 수 있다는 점입니다.

Install

• 설치 : https://github.com/michalsnik/aos/archive/master.zip
• Install for using yarn,npm,bower

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

• CDN

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

• Initialize AOS

<!-- html문서 내부에 작성 -->
<script>
  AOS.init();
</script>

How to use

• data-aos 세부속성

data-aos	사용할 애니메이션 효과명
data-aos-easing	애니메이션 시간흐름에 따른 속도설정(기본값 : ease)
data-aos-anchor	특정한 객체에 anchor를 설정하여 어떤 객체를 기준으로 애니메이션이 시작될지를 결정
data-aos-delay	애니메이션 재생 대기시간 설정(기본값 : 0)
data-aos-offset	애니메이션 효과가 시작될 객체의 위치 설정
data-aos-duration	애니메이션 지속시간 설정(기본값 : 400)
data-aos-anchor-placement	애니메이션이 어느 위치에서부터 적용될지 설정(기본값 : top-bottom)
data-aos-once	스크롤 할 때마다 애니메이션이 재생될지를 설정 (기본값 : false)

delay와 duration은 0부터 3000까지 최대값을 설정할 수 있고, 50 단위로 변경 가능합니다.

애니메이션 효과 종류

• 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

애니메이션 시작 위치 속성(data-aos-anchor)

• top-bottom
• top-center
• top-top
• center-bottom
• center-center
• center-top
• bottom-bottom
• bottom-center
• bottom-top

애니메이션 재생 속도(data-aos-easing)

• linear
• ease
• ease-in
• ease-out
• ease-in-out
• ease-in-back
• ease-out-back
• ease-in-out-back
• ease-in-sine
• ease-out-sine
• ease-in-out-sine
• ease-in-quad
• ease-out-quad
• ease-in-out-quad
• ease-in-cubic
• ease-out-cubic
• ease-in-out-cubic
• ease-in-quart
• ease-out-quart
• ease-in-out-quart

Reference : 1. https://inpa.tistory.com/m/entry/AOS-%F0%9F%93%9A-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-Animate-On-Scroll
2. https://michalsnik.github.io/aos/