ScrollReveal은 웹 페이지에서 스크롤을 통해 요소를 애니메이션화하는 라이브러리입니다. 이 효과를 사용하면 웹 페이지의 사용자 경험을 향상시킬 수 있습니다. 이번 글에서는 ScrollReveal을 사용하여 반복 애니메이션 효과를 구현하는 방법을 알아보겠습니다.

1. ScrollReveal 설치

우선 ScrollReveal을 사용하기 위해 npm을 사용하여 설치해야 합니다. 프로젝트 디렉토리에서 다음 명령어를 실행합니다.

npm install scrollreveal

2. ScrollReveal 설정

ScrollReveal을 사용하기 위해서는 먼저 ScrollReveal 객체를 생성하고, 애니메이션을 적용할 요소를 지정해야 합니다. 다음은 ScrollReveal을 초기화하는 코드입니다.

import ScrollReveal from 'scrollreveal';

// ScrollReveal 객체 생성
const sr = ScrollReveal();

// 애니메이션을 적용할 요소 선택자 지정
sr.reveal('.animate', {
  // 애니메이션 설정
  duration: 1000, // 애니메이션 지속 시간
  origin: 'bottom', // 애니메이션 시작 위치 (top, bottom, left, right)
  distance: '20px', // 애니메이션 이동 거리
  delay: 100, // 애니메이션 지연 시간
  interval: 200 // 애니메이션 간격
});

위 코드에서는 ‘.animate’ 클래스를 가진 요소들에게 애니메이션 효과를 적용합니다. 애니메이션 설정은 애니메이션 지속 시간, 시작 위치, 이동 거리, 지연 시간 및 애니메이션 간격 등을 지정할 수 있습니다.

3. 반복 애니메이션 효과 구현하기

반복 애니메이션 효과를 구현하기 위해서는 ScrollReveal의 reset 메서드를 사용해야 합니다. reset 메서드는 ScrollReveal 객체를 초기 상태로 되돌리는 기능을 제공합니다. 이를 활용하여 반복 애니메이션 효과를 구현할 수 있습니다.

다음은 반복 애니메이션 효과를 구현하는 코드입니다.

// 반복 애니메이션 효과 설정
const animateElement = document.querySelector('.animate');

const animate = () => {
  sr.reveal(animateElement, {
    duration: 1000,
    origin: 'bottom',
    distance: '20px',
    delay: 100,
    interval: 200
  });
};

// 페이지 로드 시 첫 애니메이션 실행
animate();

// 스크롤 이벤트에 반복 애니메이션 실행
window.addEventListener('scroll', animate);

// 페이지 스크롤 시 애니메이션 리셋
window.addEventListener('scroll', () => {
  if (window.pageYOffset > animateElement.offsetTop) {
    sr.reset();
  }
});

위 코드에서 사용자가 페이지를 스크롤할 때마다 animate 함수가 실행되며, 스크롤이 요소의 영역을 벗어날 경우에는 ScrollReveal 객체를 reset하여 애니메이션을 초기화합니다.

마무리

이번 글에서는 ScrollReveal을 사용하여 반복 애니메이션 효과를 구현하는 방법에 대해 알아보았습니다. ScrollReveal을 활용하면 웹 페이지의 사용자 경험을 향상시킬 수 있으며, 반복 애니메이션 효과를 통해 동적이고 흥미로운 페이지를 만들 수 있습니다.

더 많은 ScrollReveal의 기능과 옵션을 알고 싶다면 공식 문서를 참고해주세요.