[javascript] ScrollReveal의 작동 원리

01 Dec 2023

javascript

ScrollReveal은 웹 사이트나 앱에서 스크롤 이벤트에 따라 요소를 효과적으로 나타내는 JavaScript 기반의 라이브러리입니다. 이 라이브러리는 매우 간단한 방법으로 요소들을 애니메이션하거나, 페이드 인/아웃 등의 효과를 적용할 수 있습니다.

1. ScrollReveal 설치

가장 먼저 ScrollReveal을 설치해야 합니다. npm을 사용한다면, 다음 명령어를 통해 설치할 수 있습니다:

npm install scrollreveal

또는, CDN을 통해 직접 라이브러리를 불러올 수도 있습니다:

<script src="https://unpkg.com/scrollreveal"></script>

2. ScrollReveal 사용하기

ScrollReveal을 사용하기 위해서는 몇 가지 단계를 거쳐야 합니다.

2.1. 요소 선택하기

ScrollReveal은 기본적으로 class나 id 등으로 요소를 선택하여 사용합니다. 원하는 요소를 선택하고, 변수에 저장합니다.

const element = document.querySelector('.example');

2.2. ScrollReveal 객체 생성하기

ScrollReveal 객체를 생성하여 사용할 요소와 애니메이션 옵션을 전달합니다.

const sr = ScrollReveal({
  // 애니메이션 옵션 설정
  duration: 1000,
  distance: '20px',
  delay: 0,
  easing: 'ease',
  reset: false,
  mobile: false,
  origin: 'bottom',
});

2.3. ScrollReveal 적용하기

ScrollReveal 객체의 reveal 메서드를 호출하여 요소에 애니메이션을 적용합니다.

sr.reveal(element);

3. ScrollReveal 옵션

ScrollReveal에서는 다양한 옵션을 제공합니다. 몇가지 주요 옵션에 대해 소개하겠습니다.

duration: 애니메이션의 지속 시간을 지정합니다. 기본값은 1000ms입니다.
distance: 애니메이션의 이동 거리를 지정합니다. 기본값은 ‘20px’입니다.
delay: 애니메이션의 시작을 지연시킬 시간을 지정합니다. 기본값은 0ms입니다.
easing: 애니메이션의 이징 함수를 선택합니다. 기본값은 ‘ease’입니다.
reset: 페이지 로드 시 요소의 초기 상태로 되돌리는지 여부를 결정합니다. 기본값은 false입니다.
mobile: 모바일 기기에서도 애니메이션이 동작하는지 여부를 결정합니다. 기본값은 false입니다.
origin: 애니메이션의 시작 위치를 지정합니다. ‘top’, ‘bottom’, ‘left’, ‘right’ 중 하나를 선택할 수 있습니다. 기본값은 ‘bottom’입니다.

위의 예제는 ScrollReveal의 기본 사용법과 주요 옵션에 대한 간단한 소개였습니다. 더 많은 옵션과 기능을 사용하고 싶다면 ScrollReveal 공식 문서를 참조하세요.