[javascript] ScrollReveal을 이용한 요소 페이드 인 효과 구현 방법
페이지 스크롤을 내릴 때 요소들이 부드럽게 나타나는 페이드 인 효과를 구현하고 싶다면, ScrollReveal 라이브러리를 사용할 수 있습니다. ScrollReveal은 간단한 방법으로 요소들에 애니메이션 효과를 적용할 수 있게 해주는 JavaScript 라이브러리입니다.
ScrollReveal 라이브러리 설치
먼저, ScrollReveal 라이브러리를 설치해야 합니다. 아래의 명령어를 사용하여 npm을 통해 ScrollReveal을 설치합니다.
npm install scrollreveal
ScrollReveal 사용 예제
아래는 ScrollReveal을 사용하여 요소 페이드 인 효과를 구현하는 예제 코드입니다.
import ScrollReveal from 'scrollreveal';
// ScrollReveal 초기화
ScrollReveal().reveal('.fade-in', {
duration: 1000, // 애니메이션 지속 시간 (밀리초)
delay: 200, // 애니메이션 지연 시간 (밀리초)
distance: '50px', // 요소가 이동할 거리
origin: 'bottom', // 요소의 출발 지점
opacity: 0, // 요소의 초기 투명도
easing: 'ease-in-out', // 애니메이션 이징
});
// HTML 요소에 'fade-in' 클래스 추가
<div class="fade-in">페이드 인 효과를 적용할 요소들</div>
이 예제에서는 ScrollReveal의 reveal 메서드를 사용하여 fade-in 클래스가 적용된 요소들을 페이드 인 효과로 나타나게 합니다. 애니메이션의 지속 시간, 지연 시간, 이동 거리, 출발 지점, 초기 투명도, 애니메이션 이징 등은 옵션으로 설정할 수 있습니다.