ScrollReveal은 웹 페이지에서 스크롤을 할 때 요소들이 나타나거나 사라지는 효과를 구현할 수 있는 자바스크립트 라이브러리입니다. 이번 글에서는 ScrollReveal을 이용하여 다중 스크롤 트리거를 구현하는 방법에 대해 알아보겠습니다.

1. ScrollReveal 라이브러리 설치

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

npm install scrollreveal

2. ScrollReveal 초기화

ScrollReveal을 사용하기 위해 먼저 초기화 과정을 거쳐야 합니다. 아래 코드를 <script> 태그 안에 추가해주세요.

import ScrollReveal from 'scrollreveal';

const sr = ScrollReveal();

sr.reveal('.element', {
  duration: 1000,
  distance: '50px',
  easing: 'ease-out',
});

위 코드에서는 sr 객체를 생성하여 ScrollReveal을 초기화 하고, reveal 메서드를 사용하여 element 클래스를 가진 요소들이 나타날 때 애니메이션 효과를 부여하도록 설정하였습니다.

3. 다중 스크롤 트리거 설정

페이지에서 여러 스크롤 트리거를 설정하기 위해서는 각 요소 별로 다른 클래스를 사용하여 구분해야 합니다. 각각 다른 애니메이션 효과를 부여하기 위해서는 reveal 메서드의 옵션을 조정할 수 있습니다.

예를 들어, 아래 코드는 .trigger1과 .trigger2 클래스를 가진 두 요소가 스크롤 시 각각 다른 애니메이션 효과를 가지도록 설정한 예시입니다.

<div class="trigger1">
  <!-- trigger1 클래스를 가진 요소의 내용 -->
</div>

<div class="trigger2">
  <!-- trigger2 클래스를 가진 요소의 내용 -->
</div>

sr.reveal('.trigger1', {
  duration: 1000,
  distance: '50px',
  easing: 'ease-out',
});

sr.reveal('.trigger2', {
  duration: 2000,
  distance: '100px',
  easing: 'ease-in',
});

위 코드에서 .trigger1 클래스를 가진 요소는 1초 동안 50px씩 이동하며 나타나고, .trigger2 클래스를 가진 요소는 2초 동안 100px씩 이동하며 나타납니다.

마무리

위에서는 ScrollReveal을 사용하여 다중 스크롤 트리거를 간단히 구현하는 방법에 대해 알아보았습니다. ScrollReveal을 이용하면 웹 페이지에 동적인 효과를 부여하여 사용자에게 더욱 흥미로운 경험을 제공할 수 있습니다. 더 많은 ScrollReveal 옵션과 기능을 알아보려면 공식 문서를 참조해주세요.

ScrollReveal 공식 문서