이번 글에서는 ScrollReveal 라이브러리를 사용하여 웹 페이지에 수직 스크롤 트리거를 구현하는 방법에 대해 알아보겠습니다.

ScrollReveal 소개

ScrollReveal은 HTML 엘리먼트가 특정 위치에 도달할 때 효과를 적용하여 스크롤 애니메이션을 구현할 수 있는 자바스크립트 라이브러리입니다. 직관적이고 사용하기 쉬운 API를 제공하여 웹 페이지를 더욱 동적이고 흥미로운 경험으로 만들 수 있습니다.

사용 방법

1. ScrollReveal 라이브러리를 다운로드하고 HTML 파일에 포함합니다.

<script src="https://unpkg.com/scrollreveal@4.1.1/dist/scrollreveal.min.js"></script>

1. 스크롤 트리거를 적용하고자 하는 HTML 요소에 data-sr 속성을 추가합니다.

<div data-sr></div>

1. 자바스크립트로 ScrollReveal을 초기화하고 옵션을 설정합니다.

ScrollReveal().reveal('[data-sr]', {
  delay: 200,
  duration: 1000,
  easing: 'ease-in-out',
  origin: 'bottom',
  distance: '50px',
});

여기서 delay는 효과가 적용되기 전까지의 딜레이 시간, duration은 효과의 지속 시간, easing은 애니메이션 이징, origin은 효과가 시작되는 위치, distance는 효과의 이동 거리를 나타냅니다.

1. 스크롤 이벤트 리스너를 추가하여 스크롤 트리거를 활성화합니다.

window.addEventListener('scroll', () => {
  ScrollReveal().reveal('[data-sr]');
});

스크롤 이벤트가 발생할 때마다 스크롤 트리거가 활성화되어 HTML 요소에 효과가 적용됩니다.

참고 자료

• ScrollReveal 공식 문서
• ScrollReveal GitHub 저장소

위의 방법을 따라하면 ScrollReveal을 사용하여 웹 페이지에 수직 스크롤 트리거를 구현할 수 있습니다. ScrollReveal을 통해 동적이고 흥미로운 웹 페이지를 만들어보세요.