스크롤 애니메이션 라이브러리 AOS.js

1. 소개

AOS.js는 스크롤의 움직임에 따라 요소에 애니메이션(트랜지션) 효과를 손쉽게 구현할 수 있는 자바스크립트 라이브러리다.

AOS - Animate on scroll library

AOS.js의 장점은 굉장히 가볍다는 데 있다. 파일은 aos.css와 aos.js 2개로 동작하며 각각의 파일을 보면 코드도 간단하게 구성되어 있다. 간단하면서도 기본적인 애니메이션 효과를 모두 갖추고 있기 때문에 아주 훌륭한 라이브러리라고 할 수 있다. 

 

2. 사용법

HTML에 아래 코드를 추가한다.

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

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

실행하려면 자바스크립트에 아래 코드를 추가한다.

AOS.init();

 

3. 기능설명

애니메이션 효과를 사용할 요소에 코드를 추가하면 된다.

사용 가능한 코드 목록은 여기에서 확인할 수 있으며 주로 사용하는 코드는 아래와 같다.

michalsnik/aos

/* 위쪽으로 페이드 효과 */
<div data-aos="fade-up"></div>

/* 아래쪽으로 페이드 효과 */
<div data-aos="fade-down"></div>

/* 오른쪽으로 페이드 효과 */
<div data-aos="fade-right"></div>

/* 왼쪽으로 페이드 효과 */
<div data-aos="fade-left"></div>

/* 왼쪽으로 플립 효과 */
<div data-aos="flip-left"></div>

/* 오른쪽으로 플립 효과 */
<div data-aos="flip-right"></div>

/* 위쪽으로 플립 효과 */
<div data-aos="flip-up"></div>

/* 아래쪽으로 플립 효과 */
<div data-aos="flip-down"></div>

/* 줌 효과 */
<div data-aos="zoom-in"></div>

 

Easing 함수 중에서 기본적인 linear나 ease 말고 다른 종류를 써보자. 느낌이 많이 달라진다.

이 사이트를 참고하면 편하다.

Easing Functions Cheat Sheet

 

4. 주의사항

1. 이 라이브러리를 사용한 요소는 transform: none; 속성이 강제되기 때문에 다른 transform을 사용하는데 제약이 있다.

 

2. 반응형에 따라 한 요소에 다른 애니메이션 효과를 사용하고 싶은 경우가 있다.

그때는 자바스크립트에 아래 같은 코드를 사용하면 된다.

function AOS_MOBILE() {
  if (matchMedia("screen and (max-width: 768px)").matches) {

    $('.left_con').attr('data-aos', 'fade-down');

  }
} // 768px 이하일 때 left_con 의 애니메이션 효과를 fade-down 으로 바꾼다.
AOS_MOBILE();

 

3. AOS.js는 모바일이나 태블릿에서 애니메이션 효과를 사용하지 않게 할 수 있다.

AOS.init({

  disable: false, // 'phone', 'tablet', 'mobile'

});

 

하지만 desktop은 변수로 제공하지 않는데 아래 코드를 사용하면 된다.

AOS.init({

  disable: function () {
    var desktop = 1280;
    return window.innerWidth > desktop;
  } // 1280px 이상일 때 disable

});