jQuery / Plugin / AOS / 스크롤하면 애니메이션 효과와 함께 나타나는 요소 만드는 라이브러리
AOS
세로로 긴 웹 페이지가 있습니다. 화면을 벗어나는 경우 스크롤하면 밑에 있는 콘텐츠를 볼 수 있습니다. 그 보여지는 콘텐츠에 애니메이션 효과를 주는 라이브러리가 AOS(Animate on scroll library)입니다.
나타나기, 회전하기, 확대하기 등 다양한 효과를 제공합니다.
- 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
애니메이션 효과 예제는 https://michalsnik.github.io/aos/에서 볼 수 있습니다. 스크롤해서 밑으로 내려가면 요소가 애니메이션 효과와 함께 나타납니다.
https://github.com/michalsnik/aos에서 소스코드를 다운로드하고 자세한 사용법을 볼 수 있습니다.
예제
다음은 AOS를 적용한 간단한 예제입니다. CDN을 제공하므로 소스코드를 다운로드 하지 않아도 사용 가능하고, jQuery가 필요합니다.
data-aos="fade-up"의 fade-up을 flip-up, slide-up 등으로 변경하면 애니메이션 효과가 바뀝니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>Script</title> <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" /> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://unpkg.com/aos@next/dist/aos.js"></script> <script> $( document ).ready( function() { AOS.init(); } ); </script> <style> body { margin: 0px; font-family: Consolas, monospace; } .a { height: 100vh; background-color: #eeeeee; } .b { display: inline-block; width: 300px; height: 300px; margin: 0px 40px; background-color: #000000; } </style> </head> <body> <div class="a"> Scroll </div> <div style="padding: 200px 0px;"> <div data-aos="fade-up" class="b"> Fade Up </div> </div> </body> </html>
애니메이션 효과 세부 설정
위치, 애니메이션 속도, 지속 시간 등을 세세하게 정하고 싶다면 다음처럼 속성을 추가합니다.
<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>
delay와 duration은 0부터 3000까지 가능하고, 50 단위로 설정합니다.