AOS 라이브러리 사용법 알아보기(feat.스크롤 애니메이션)

단순한 정보를 제공하던 정적인 웹 화면에서 이제는 정보제공은 물로 다양한 인터렉션과 애니메이션 효과까지 적용된 웹 화면들이 늘어나고 있습니다. 오히려 정적인 웹 화면을 찾는 게 더 힘든 것 같다는 생각이 들 정도로 회사를 대표하는 대부분의 사이트에 들어가 보면 웹 사이트들이 크고 작은 애니메이션 효과가 적용되어 있습니다.

 

그 중 가장 많이 사용되는 효과는 단연 스크롤 애니메이션일거라 생각됩니다. 스크롤 애니메이션이란 웹 화면의 스크롤이 이벤트가 발생해야 하는 웹 화면의 위치에 도달하였을 때 미리 정의해놓은 이벤트 효과가 발생되는 효과를 말합니다

애니메이션 효과를 적용하는 방법은 대표적으로 인터섹션옵저버를 사용하거나 윈도우의 스크롤 값과 이벤트가 적용되어야 하는 타깃의 offset값을 비교해서 애니메이션을 적용하는 방법, 스크롤매직과 같은 유명한 라이브러리를 이용하는 방법 등 다양한 방법들이 있지만 가장 쉽게 사용할 수 있는 라이브러리 중 하나가 바로 AOS 라이브러리 입니다.

 

- 예시 1 (Different build in animations)

 

- 예시 2 (With anchor setting in use)

 

- 예시 3 (With anchor-placement and different easing)

 

- 예시 4 (With simple custom animations)

 

위의 예제를 보니 너무 멋지지 않나요? (나만 그런가! 소오~~~름🐄🐄🐄🐄🐄🐄)

AOS는 깃헙에서 해당 코드를 다운받을수도 있고 사용법도 쉬우면서 NPM까지 지원합니다. 와우!!! 😀😀😀😀

• AOS 깃헙: https://github.com/michalsnik/aos
• AOS Demo: https://michalsnik.github.io/aos/
• AOS NPM: https://www.npmjs.com/package/aos

 

📃 설정

일반적인 웹 화면이라면 해당 AOS 라이브러리를 직접 다운받아서 불러오거나 CDN을 통해서 불러와서 사용할 수 있고 Vue나 React와 같은 프래임워크에서 사용하려고 한다면 NPM을 통해 설치하여 사용할 수 있습니다. 

 

※ 한 가지 주의할 점은 AOS 라이브러리 애니메이션은 블록 태그(Block Tag)에만 적용 가능합니다. 인라인 태그(Inline Tag)에는 효과가 적용되지 않습니다.

 

1) 일반적 사용법

- 스타일 추가

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

- 스크립트 호출

  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>

 

2) 패키지 관리자 사용

• yarn add aos
• npm install aos

- 스크립트, 스타일 가져오기 및 AOS 초기화:

import AOS from 'aos';
import 'aos/dist/aos.css'; // You can also use <link> for styles
// ..
AOS.init();

 

 Vue, angular등 자신이 사용하고 있는 프래임워크에 맞게 설정해서 사용할 수 있습니다. React에서 AOS를 사용한다면 아래와 같이 적용할 수 있습니다.

 

- React 적용 예시

import React, { useEffect } from "react";
import AOS from "aos";
import "aos/dist/aos.css";

useEffect(() => {
  AOS.init();
})

 

📘 사용방법

1) 속성 

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

 

2) 속성 사용

애니메이션 효과를 보여줄 요소에 사용할 속성을 정의합니다.

<div data-aos="fade-in"></div>

 

다양한 속성을 한 번에 정의할 수도 있습니다.

<div
    data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center"
  >
  </div>

 

3) 세부 속성 목록

✅ Animations

• 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

 

✅ Anchor placements:

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

 

✅ Easing functions:

• 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

 

출처

• AOS 깃헙: https://github.com/michalsnik/aos
• AOS Demo: https://michalsnik.github.io/aos/
• AOS NPM: https://www.npmjs.com/package/aos