[jQuery] 스크롤 애니메이션 효과(AOS)

 

#1 기능 설명

  화면을 스크롤하게 되면 해당 시점에서 오브젝트들이 서서히 나타나는 효과를 라이브러리를 사용하여 매우 쉽고, 간편하게 다양한 방식으로 줄 수 있습니다.

 

 

#2 적용 및 사용 방법

  공식 페이지 : https://michalsnik.github.io/aos/

  위 페이지에서 각 속성별 효과를 확인해 볼 수 있습니다.

 

AOS 연결하기

  ※ 아래 내용은 CDN 방식으로 연결하는 내용이며 download 파일로 연결하고 싶다면 다음 파일을 받아서 이용하셔도 됩니다.

aos-master.zip

0.10MB

 

  CSS와 JS를 연결하기 위해 html의 </head> 위쪽에 다음 내용을 입력해 줍니다.

<!-- AOS CSS CDN -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<!-- AOS JS CDN -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

 

 AOS를 동작 시키기 위해 다음 내용을 html의 </body> 위쪽에 다음 내용을 삽입해 줍니다.

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

  여기까지만 하면 준비과정은 모두 끝났습니다.

  이제 원하는 대상에게 data-aos="효과 이름"의 속성 값만 지정해 주면 됩니다.

  각 효과는 아래 샘플을 통해 확인할 수 있습니다. 

<!-- 예 -->
<div data-aos="fade-up"></div>

 

 

#3 AOS 효과 샘플

AOS - animations

See the Pen AOS - animations by Snik (@michalsnik) on CodePen.

 

 

 

AOS - anchor

See the Pen AOS - anchor by Snik (@michalsnik) on CodePen.

 

 

 

AOS - anchor & anchor-placement

See the Pen AOS - anchor & anchor-placement by Snik (@michalsnik) on CodePen.

 

 

 

AOS - custom animations

See the Pen AOS - custom animations by Snik (@michalsnik) on CodePen.

 

 

 

 

#4 정의되어있는 옵션들

애니메이션

페이드 애니메이션

  • fade

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

 

플립 애니메이션

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

 

슬라이드 애니메이션

  • slide-up
  • slide-down
  • slide-left
  • slide-right

 

줌 애니메이션

  • 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

 

앵커 시작 위치

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

 

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