[javascript] ScrollReveal을 이용한 요소 복원 효과 구현 방법

01 Dec 2023

ScrollReveal은 웹 페이지에서 스크롤되는 동안 요소를 부드럽게 표시하고 감추는 기능을 제공하는 JavaScript 라이브러리입니다. 이를 사용하여 요소 복원 효과를 구현할 수 있습니다.

ScrollReveal 설치

우선 ScrollReveal을 사용하기 위해 해당 라이브러리를 다운로드하고 설치해야 합니다. 다음의 명령을 사용하여 NPM으로 ScrollReveal을 설치할 수 있습니다.

npm install scrollreveal

ScrollReveal을 사용하여 요소 복원 효과를 구현하는 방법은 다음과 같습니다.

HTML 요소에 data-sr 속성을 추가하여 ScrollReveal이 적용될 요소를 지정합니다. 이 속성에는 효과를 설정하는 옵션을 기술합니다.
JavaScript에서 ScrollReveal 객체를 생성하고 reveal() 메서드를 호출하여 요소에 효과를 적용합니다.
index.html 파일을 열고 아래의 코드를 추가하여 ScrollReveal이 적용될 요소를 설정합니다.

<div class="element" data-sr="wait 0.2s, scale up 30%, enter left"></div>

import ScrollReveal from 'scrollreveal';

ScrollReveal().reveal('.element', {
  delay: 200,
  duration: 1000,
  scale: 0.3,
  origin: 'left'
});

위의 코드에서 delay는 효과가 발생하기 전까지의 딜레이 시간을, duration은 효과의 지속 시간을, scale은 효과의 크기 변화를, origin은 효과의 시작 위치를 설정합니다.

ScrollReveal에서는 다양한 효과 설정 옵션을 제공합니다. 몇 가지 주요 옵션은 다음과 같습니다.

이 외에도 ScrollReveal은 텍스트 효과, 회전 효과, 배경색 변경 효과 등 다양한 효과를 제공합니다. 자세한 내용은 ScrollReveal 공식 문서를 참고하십시오.