AOS 라이브러리
태그
HtmlJavascript
상세설명AOS ( Animation On Scroll ) 라이브러리 사용법 ( 스크롤 애니메이션 )
작성일자2024.01.14
스크롤이 이벤트 발생 위치에 도달했을 때 쉽게 애니메이션 효과를 줄 수 있는 스크롤 애니메이션 라이브러리인 'AOS' 사용 방법에 대해 정리해보았다.
AOS 라이브러리 공식 홈
https://michalsnik.github.io/aos/
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 옵션 속성
<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>
결과