스크롤 바 내렸을 때 요소가 등장하는 애니메이션 플러그인 Scroll Reveal, Animate On Scroll
목차
Scroll Reveal
페이지를 스크롤할 때, 특정 요소들이 부드럽게 화면에 나타나거나 사라지는 등의 다양한 애니메이션 효과를 구현할 수 있다. 직관적이고 간단한 API를 제공하여, 원하는 애니메이션을 쉽게 설정하고 적용할 수 있다. 요소가 화면에 나타날 때 페이드 인(fade-in) 효과를 주거나, 특정 방향으로 슬라이드 인(slide-in) 하는 등의 동작을 간단한 코드로 구현할 수 있다. 가벼우면서도 성능이 뛰어나, 다양한 웹사이트에 적용이 가능하다. 또한, 반응형 디자인을 지원하여, 다양한 기기에서 일관된 애니메이션 효과를 제공한다.
wb_incandescent Tip
2버전까지는 무료, 3버전부터는 유료로 사용해야 한다. 무료버전 최상위 버전은 v2.3.2이다.
사용법
라이브러리 추가하기
<head></head> 태그 사이에 입력한다.
<head> <script src="https://cdnjs.cloudflare.com/ajax/libs/scrollReveal.js/2.3.2/scrollReveal.js"></script> </head>
파일 직접 다운로드하기 https://www.jsdelivr.com/package/npm/swiper
html 작성하기
<body></body> 태그 사이에 입력한다
// 단일 사용 (data-sr 필수입력) <h1 data-sr>Test</h1> // 여러개 사용 (data-sr에 값을 넣어 요소별로 효과 지정 가능) <h1 data-sr="enter top over 1.5s wait 0.2s">Test</h1> <h1 data-sr="move 100px wait 0.4s">Test</h1> <h1 data-sr="scale down 20% wait 0.6s">Test</h1>
js 작성하기
<script></script> 태그 사이, 또는 외부 scipt파일에 입력한다
// 기본 new ScrollReveal(); // 사용자 정의 new ScrollReveal({ enter: 'bottom', wait: '0.3s', move: '100px', over: '1.5s', scale: { direction: 'up', power: '0%' }, reset: true, viewFactor: 0.5 });
자주쓰는 옵션
| enter | 애니메이션 시작 위치 ('top', 'bottom', 'left', 'right') |
|---|---|
| move | 이동 거리 (px, %) |
| over | 애니메이션 지속 시간 (ms) |
| wait | 애니메이션 시작 전 지연 시간 (ms) |
| easing | 애니메이션 효과 ('ease', 'ease-in', 'ease-in-out', 'ease-out', 'hustle') |
| scale | 크기 변경 (px, %) { direction: 'up', power: '5%' } |
| rotate | 회전 방향 (px, %) { x: 0, y: 0, z: 0 } |
| opacity | 투명도(%) 0 |
| mobile | 모바일에서 작동 여부 (true, false) |
| reset | 스크롤할 때마다 애니메이션 재실행 여부 (true, false) |
| delay | 애니메이션 재생시 지연 횟수 ('always', 'onload', 'once') |
| vFactor | 뷰포트에서 요소가 감지되면 트리거 되는 시점 (%) |
Animate On Scroll
스크롤 이벤트를 기반으로 요소에 애니메이션 효과를 추가할 수 있게 해주는 오픈 소스 라이브러리. 사용자가 페이지를 스크롤할 때 다양한 애니메이션 효과를 간단하게 구현할 수 있다.
사용법
라이브러리 추가하기
<head></head> 태그 사이에 입력한다.
<head> <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> </head>
파일 직접 다운로드하기 https://michalsnik.github.io/aos/
html 작성하기
<body></body> 태그 사이에 입력한다
// 단일 사용 (data-aos 필수입력) <div data-aos="fade-in"></div> // 여러개 사용 (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>
js 작성하기
<script></script> 태그 사이, 또는 외부 scipt파일에 입력한다
// 기본 AOS.init(); // 사용자 정의 AOS.init({ offset: 120, delay: 0, duration: 400, easing: 'ease', once: false, mirror: false, anchorPlacement: 'top-bottom', });
자주쓰는 옵션
| offset | 원래 트리거 지점으로부터의 오프셋 (px) |
|---|---|
| delay | 애니메이션 시작 전 지연 시간 (ms) |
| duration | 애니메이션 지속 시간 (ms) |
| easing | 애니메이션 효과 ('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') |
| once | 애니메이션 한번만 실행해야 하는지 여부 (true, false) |
| mirror | 스크롤을 지나가는 동안 요소가 애니메이션화되어야 하는지 여부 (true, false) |
| anchorPlacement | 애니메이션을 트리거해야 하는 창과 관련된 요소의 위치를 정의 ('top-bottom', 'top-center', 'top-top', 'center-bottom', 'center-center', 'center-top', 'bottom-bottom', 'bottom-center', 'bottom-top |