[javascript] ScrollReveal을 활용한 스크롤 이벤트 이동 감지 방법

01 Dec 2023

javascript

소개

스크롤 이벤트를 감지하고 웹 페이지에서 스크롤 이동 시 특정 작업을 수행하고 싶은 경우가 있을 수 있습니다. ScrollReveal 라이브러리는 스크롤 이벤트를 캡처하고 요소가 나타나는 방식을 제어할 수 있도록 해줍니다. 이를 활용하여 웹 페이지의 스크롤 이동을 감지하고 반응할 수 있는 기능을 구현할 수 있습니다.

설치

먼저, ScrollReveal 라이브러리를 프로젝트에 추가해야 합니다. 아래 명령을 사용하여 npm을 통해 라이브러리를 설치합니다.

npm install scrollreveal

사용 방법

ScrollReveal 라이브러리를 가져옵니다.

import ScrollReveal from 'scrollreveal';

ScrollReveal 객체를 생성합니다.

const sr = ScrollReveal();

ScrollReveal을 사용할 요소를 선택하고 옵션을 설정합니다.

const myElement = document.querySelector('.my-element');
const options = {
  origin: 'bottom',
  distance: '20%',
  duration: 1000,
  reset: true,
};

sr.reveal(myElement, options);

스크롤 이벤트를 감지하고 요소가 나타나는 순간에 콜백 함수를 실행합니다.

sr.reveal('.my-element', {
  // 옵션 설정
  // 콜백 함수 실행
  afterReveal: (el) => {
    console.log(el);
    alert('요소가 나타났습니다.');
  },
});

사용 예제

아래는 ScrollReveal을 사용하여 스크롤 이벤트 이동을 감지하고 특정 작업을 수행하는 간단한 예제입니다.

import ScrollReveal from 'scrollreveal';

const sr = ScrollReveal();

// 페이지 내의 모든 요소를 숨김
sr.reveal('.my-element', {
  opacity: 0,
  reset: true,
});

// 요소가 스크롤에 의해 나타날 때 페이드 인 효과 적용
sr.reveal('.my-element', {
  duration: 1000,
  origin: 'bottom',
  distance: '20%',
  delay: 500,
  opacity: 0,
});

// 요소가 모두 나타난 후 콜백 함수 실행
sr.reveal('.my-element', {
  afterReveal: (el) => {
    console.log(el);
    alert('요소가 나타났습니다.');
  },
});

위 예제에서는 페이지 내의 모든 .my-element 요소를 숨긴 뒤, 스크롤에 따라 요소가 나타나면서 페이드 인 효과를 주고 있습니다. 모든 요소가 나타난 후에는 콜백 함수가 실행되어 알림창이 나타나게 됩니다.

참고 자료

ScrollReveal 공식 문서: https://scrollrevealjs.org/
NPM 패키지: https://www.npmjs.com/package/scrollreveal