[javascript] ScrollReveal을 이용한 요소 페이드 아웃 효과 구현 방법

01 Dec 2023

ScrollReveal은 웹 페이지의 스크롤 이벤트를 사용하여 요소들을 페이드 아웃하는 효과를 쉽게 구현할 수 있는 JavaScript 라이브러리입니다.

ScrollReveal 설치하기

먼저, ScrollReveal을 사용하기 위해서는 해당 라이브러리를 설치해야 합니다.

npm install scrollreveal

ScrollReveal을 초기화하여 원하는 요소에 효과를 적용할 준비를 해야 합니다.

import ScrollReveal from 'scrollreveal';

ScrollReveal().reveal('.element');

ScrollReveal을 초기화한 후, .reveal() 메소드를 사용하여 페이드 아웃 효과를 적용할 요소를 선택합니다.

<div class="element">페이드 아웃 효과를 적용할 요소입니다.</div>

ScrollReveal().reveal('.element', { 
    duration: 2000, // 효과 지속 시간
    delay: 500, // 효과가 적용되기 전의 대기 시간
    opacity: 0 // 요소의 초기 투명도
});

위의 코드에서는 .element 클래스를 가진 요소들에게 2초 동안 페이드 아웃 효과를 적용하고, 효과가 적용되기 전에 0.5초의 대기 시간을 주었습니다. 또한, 요소의 초기 투명도는 0으로 설정되어 있어 처음에는 투명한 상태로 시작합니다.

ScrollReveal은 기본적으로 페이드 아웃 효과를 제공하지만, 다양한 효과를 설정할 수도 있습니다. 아래는 일부 추가적인 효과의 예시입니다.

요소가 스크롤되는 방향에 따라 움직이는 효과를 설정할 수 있습니다.

ScrollReveal().reveal('.element', { 
    distance: '50px', // 움직이는 거리
    origin: 'bottom', // 움직이는 방향
});

요소가 회전하는 효과를 설정할 수 있습니다.

ScrollReveal().reveal('.element', { 
    rotate: { x: 50, y: 50, z: 0 } // 회전하는 각도
});