[javascript] ScrollReveal을 활용한 스크롤 이벤트 체크 포인트 구현 방법

01 Dec 2023

javascript

ScrollReveal은 JavaScript 라이브러리로, 웹 페이지에서 스크롤 이벤트가 발생할 때 요소의 나타나는 애니메이션을 구현할 수 있습니다. 이를 활용하여 사용자가 스크롤 할 때마다 체크 포인트를 설정하여 요소를 동적으로 보여줄 수 있습니다.

ScrollReveal 설치

먼저, ScrollReveal 라이브러리를 사용하기 위해 CDN 링크를 HTML 파일의 <head> 태그 안에 추가해야 합니다.

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

혹은 npm을 사용하여 설치할 수도 있습니다.

npm install scrollreveal

ScrollReveal 설정

ScrollReveal을 사용하기 위해서는 다음과 같은 순서로 설정해야 합니다.

ScrollReveal 객체를 생성합니다.
요소의 애니메이션 효과와 옵션을 설정합니다.
체크 포인트(출현 지점)를 설정합니다.
scrollReveal() 메서드를 호출하여 요소를 보여줍니다.

아래는 ScrollReveal 설정 예시입니다.

const sr = ScrollReveal({
  origin: 'bottom',
  distance: '50px',
  duration: 1000,
  delay: 0,
  opacity: 0,
  scale: 0.5
});

sr.reveal('.example-element');

origin: 요소가 출현할 방향 (top, right, bottom, left)
distance: 요소가 이동할 거리
duration: 애니메이션의 지속 시간(ms)
delay: 애니메이션의 시작을 지연시킬 시간(ms)
opacity: 요소의 투명도 설정 (0부터 1까지)
scale: 요소의 크기 설정 (0부터 1까지)

체크 포인트 설정

체크 포인트란 사용자가 지나간 스크롤 위치에 따라 요소가 나타나는 지점을 말합니다. ScrollReveal은 다양한 방법으로 체크 포인트를 설정할 수 있습니다.

요소에 직접 클래스 추가

요소에 data-sr이라는 클래스를 추가하여 체크 포인트를 설정할 수 있습니다.

<div class="example-element" data-sr></div>

JavaScript에서 직접 설정

JavaScript에서 ScrollReveal의 reveal() 메서드를 사용하여 체크 포인트를 설정할 수도 있습니다.

sr.reveal('.example-element', {
  origin: 'left',
  distance: '100px',
  duration: 2000
});

마무리

위의 예시 코드와 설명을 참고하여 ScrollReveal을 활용한 스크롤 이벤트 체크 포인트를 구현할 수 있습니다. ScrollReveal의 다양한 옵션과 설정을 활용하여 웹 페이지에 동적인 애니메이션을 만들어보세요.

더 자세한 정보는 ScrollReveal 공식 문서를 참고하시기 바랍니다.