[javascript] ScrollReveal을 이용한 실시간 스크롤 체크 기능 구현 방법

01 Dec 2023

javascript

ScrollReveal은 JavaScript 라이브러리로, 웹 페이지에서 스크롤 이벤트를 감지하고 애니메이션 효과를 적용하는 기능을 제공합니다. 이를 사용하여 실시간으로 스크롤 체크를 구현하는 방법을 알아보겠습니다.

ScrollReveal 라이브러리 설치

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

npm install scrollreveal

HTML 구조 설정

스크롤 체크를 적용할 HTML 요소를 설정해야 합니다. 예를 들어, 스크롤 체크를 적용할 div 요소를 다음과 같이 작성합니다.

<div class="scroll-check"></div>

스크롤 체크 기능 구현

다음으로, JavaScript 파일을 생성하고 ScrollReveal 라이브러리를 로드한 뒤, 스크롤 체크 기능을 구현합니다. 아래의 예시 코드를 참고해주세요.

// ScrollReveal 라이브러리 로드
import ScrollReveal from 'scrollreveal';

// ScrollReveal 초기화
ScrollReveal().reveal('.scroll-check', {
  duration: 2000,   // 애니메이션 지속 시간 (ms)
  distance: '100px', // 애니메이션 이동 거리
  origin: 'bottom',  // 애니메이션 시작 위치
});

// 스크롤 이벤트 등록
window.addEventListener('scroll', () => {
  const scrollPosition = window.scrollY;
  
  // 스크롤 체크하는 로직
  if (scrollPosition > 500) {
    // 스크롤 체크 완료 시 실행할 코드
    console.log('스크롤 체크 완료');
  }
});

위의 코드에서 ScrollReveal().reveal() 함수를 사용하여 .scroll-check 클래스를 가진 요소에 애니메이션 효과를 적용합니다. duration, distance, origin 등의 옵션을 사용하여 애니메이션의 지속 시간, 이동 거리, 시작 위치를 설정할 수 있습니다.

window.addEventListener('scroll') 함수를 사용하여 스크롤 이벤트를 등록하고, window.scrollY를 사용하여 현재 스크롤 위치를 가져옵니다. 이후 원하는 스크롤 체크 로직을 구현하고, 체크 완료 시 실행할 코드를 작성합니다.

실행 결과

위의 코드를 실행하면, 페이지를 스크롤할 때 .scroll-check 클래스를 가진 요소에 지정한 애니메이션 효과가 적용됩니다. 또한, 스크롤 체크 로직을 통해 스크롤 위치에 따라 원하는 동작을 수행할 수 있습니다.

참고 자료

ScrollReveal 공식 문서 (https://scrollrevealjs.org/)
ScrollReveal GitHub 리포지토리 (https://github.com/jlmakes/scrollreveal)