AOS 라이브러리

Javascript

AOS 라이브러리

minsun309 2024. 8. 26. 20:29

스크롤이 이벤트 발생 위치에 도달했을 때 쉽게 애니메이션 효과를 줄 수 있는 스크롤 애니메이션 라이브러리인 'AOS' 사용 방법에 대해 정리해 보았다.

AOS 라이브러리 공식 홈

AOS - Animate on scroll library

AOS Animate On Scroll Library Scroll down

michalsnik.github.io

AOS 설치

head 태그 안에 안내해 준 CDN 소스인 CSS와 JS를 넣는다.

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

AOS 라이브러리 사용을 위한 초기화 스크립트를 작성한다.

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

data-aos 옵션 속성

data-aos : 사용할 애니메이션 효과 명
data-aos-offset : 애니메이션 효과가 시작될 객체의 위치 설정
data-aos-delay : 애니메이션 재생 대기 시간 설정(default: 0)
data-aos-duration : 애니메이션의 재생시간 설정(default: 400)
data-aos-easing : 애니메이션 시간 흐름에 따른 속도 설정 옵션(default: ease)
data-aos-once : 스크롤할 때마다 애니메이션이 재생될지를 설정 (default: true) / false 일시 스크롤을 위로 올렸다 다시 내릴 때 애니메이션이 다시 재생됨
data-aos-anchor-placement : 애니메이션이 어느 위치에서부터 적용될지 설정(default: top-bottom)

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

AOS 사용 방법

애니메이션 효과를 주고 싶은 해당 영역에 data-aos 옵션 속성을 적용하면 된다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- aos -->
    <link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css" />
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

    <style>
      .area {
        max-width: 1400px;
        margin: 0 auto;
        padding: 200px 100px;
      }

      .box {
        flex: 1;
        height: 300px;
        background-color: antiquewhite;
        margin-bottom: 300px;
      }

      .flex {
        display: flex;
        align-items: center;
        gap: 20px;
      }
    </style>
  </head>
  <body>
    <section class="area">
      <div class="flex">
        <div class="box" data-aos="fade-up" data-aos-duration="1000"></div>
        <div
          class="box"
          data-aos="fade-up"
          data-aos-delay="50"
          data-aos-duration="1000"
        ></div>
      </div>
      <div class="box" data-aos="fade-left" data-aos-duration="1000"></div>
      <div class="flex">
        <div class="box" data-aos="fade-left" data-aos-duration="1000"></div>
        <div class="box" data-aos="flip-left" data-aos-duration="1000"></div>
        <div class="box" data-aos="fade-right" data-aos-duration="1000"></div>
      </div>
    </section>
    <script>
      AOS.init();
    </script>
  </body>
</html>

결과