[javascript] ScrollReveal을 활용한 스크롤 화면 분할 구현 방법

01 Dec 2023

javascript

많은 웹사이트들이 스크롤을 다루는 각주에 크고 독특한 시각적 효과를 적용하여 사용자 경험을 향상시키고 있습니다. 대부분은 CSS transition과 함께 JavaScript 라이브러리를 사용하여 스크롤 이벤트 감지 및 애니메이션 효과를 적용합니다.

여기에서는 ScrollReveal 라이브러리를 사용하여 스크롤 화면을 분할하고 각 섹션을 순차적으로 나타내는 방법을 알아보겠습니다.

ScrollReveal 설치 및 설정

먼저, ScrollReveal을 프로젝트에 설치해야 합니다.

npm install scrollreveal

ScrollReveal을 사용하려는 JavaScript 파일에서 다음과 같이 불러옵니다.

import ScrollReveal from 'scrollreveal';

또한, CSS 파일에서 ScrollReveal의 애니메이션 효과를 사용하기 위한 클래스를 정의해야 합니다.

.section {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.3s, transform 0.3s;
}

ScrollReveal 설정 및 사용

ScrollReveal 객체를 초기화할 때, 애니메이션 옵션을 설정할 수 있습니다. 아래 예제에서는 각 섹션이 타임라인에 따라 순차적으로 등장하도록 설정합니다.

const sr = ScrollReveal();

sr.reveal('.section', {
  delay: 200,
  duration: 500,
  distance: '20px',
  origin: 'bottom',
  opacity: 0,
  interval: 100
});

위 예제에서 sr.reveal() 메서드는 대상 엘리먼트에 애니메이션 효과를 적용합니다. '.section'은 각 섹션을 식별하는 CSS 선택자입니다. 나머지 옵션들은 등장하는 섹션의 특정한 애니메이션 효과를 정의합니다.

HTML 마크업

다음으로, HTML에 각각의 섹션을 마크업합니다. 각 섹션에는 분할 효과를 적용하고 싶은 클래스(.section)를 추가합니다.

<section class="section">Section 1</section>
<section class="section">Section 2</section>
<section class="section">Section 3</section>

결과 확인

이제 프로젝트를 실행하고 스크롤하면 각 섹션이 순차적으로 등장하는 것을 확인할 수 있습니다. ScrollReveal을 사용하여 효과적인 스크롤 분할 화면을 구현했습니다.

더 많은 ScrollReveal 옵션과 사용법은 공식 문서에서 확인하실 수 있습니다.

참고 자료

ScrollReveal 공식 문서: https://scrollrevealjs.org
GitHub 저장소: https://github.com/jlmakes/scrollreveal