[javascript] ScrollReveal을 활용한 스크롤 시간 지연 효과 구현 방법

01 Dec 2023

ScrollReveal은 웹 페이지에서 스크롤 이벤트가 발생했을 때 요소를 지연시켜 나타내는 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하면 웹 페이지를 더 동적이고 흥미로운 경험으로 만들 수 있습니다.

1. ScrollReveal 라이브러리 설치하기

먼저, ScrollReveal 라이브러리를 설치해야 합니다. 다음 명령어를 사용하여 npm을 통해 라이브러리를 설치할 수 있습니다.

npm install scrollreveal

설치가 완료되면, ScrollReveal을 사용할 자바스크립트 파일에 다음 코드를 추가합니다.

import ScrollReveal from 'scrollreveal';

ScrollReveal().reveal('.my-element', {
  delay: 500,
  duration: 1000,
});

위 코드는 .my-element라는 클래스를 가진 요소가 스크롤 이벤트에 의해 나타날 때 0.5초의 지연 시간과 1초의 지속 시간을 가지도록 설정합니다.

스크롤 시간 지연 효과를 적용하기 원하는 HTML 요소에 .my-element 클래스를 추가합니다.

<div class="my-element">
  요소 내용...
</div>

.my-element 클래스에 대해 원하는 스타일을 CSS 파일에 추가합니다.

.my-element {
  opacity: 0;
  transition: opacity 0.5s;
}

.my-element.reveal {
  opacity: 1;
}

위 CSS 코드는 .my-element 요소의 초기 opacity를 0으로 설정하고, 스크롤 이벤트에 의해 .reveal 클래스가 추가될 때 opacity를 1로 변경하여 나타나도록 합니다.

마지막으로, 스크롤 이벤트가 발생했을 때 ScrollReveal이 작동하도록 window.addEventListener를 사용하여 다음 코드를 추가합니다.

window.addEventListener('scroll', () => {
  ScrollReveal().reveal('.my-element');
});

위 코드는 스크롤 이벤트가 발생했을 때 .my-element 클래스를 가진 요소가 나타나도록 합니다.