[javascript] ScrollReveal을 활용한 요소 순차 등장 효과 구현 방법

01 Dec 2023

javascript

ScrollReveal은 웹 페이지 요소를 스크롤하면 순차적으로 나타나게 하는 효과를 구현할 수 있는 자바스크립트 라이브러리입니다. 이를 활용하면 웹 페이지를 더 동적이고 흥미롭게 만들 수 있습니다. 이번 글에서는 ScrollReveal을 사용하여 요소 순차 등장 효과를 구현하는 방법을 알아보겠습니다.

1. ScrollReveal 라이브러리 설치

먼저 ScrollReveal 라이브러리를 설치해야 합니다. 아래 명령을 사용하여 npm을 통해 설치할 수 있습니다.

npm install scrollreveal

2. ScrollReveal 라이브러리 연결

HTML 파일에서 ScrollReveal 라이브러리를 연결합니다. <head></head> 태그 사이에 아래 코드를 추가합니다.

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

3. 요소에 순차 등장 효과 적용하기

스크롤에 따라 순차적으로 등장할 요소에 .reveal 클래스를 추가합니다. 이후, 자바스크립트 코드를 사용하여 ScrollReveal 라이브러리를 초기화하고 설정을 변경할 수 있습니다.

<div class="reveal">요소 1</div>
<div class="reveal">요소 2</div>
<div class="reveal">요소 3</div>

4. ScrollReveal 초기화 및 설정

스크립트 태그를 통해 ScrollReveal을 초기화하고 설정합니다. 아래 코드를 <body></body> 태그 맨 아래에 추가합니다.

<script>
    ScrollReveal().reveal('.reveal', {
        delay: 200, // 순차 등장 시간 간격 (밀리초)
        distance: '20px', // 요소가 등장할 거리
        origin: 'bottom', // 등장할 방향
        duration: 1000, // 등장하는데 걸리는 시간 (밀리초)
        easing: 'ease-in-out', // 등장하는 애니메이션 종류
    });
</script>

5. 결과 확인하기

위와 같이 설정한 후 웹 페이지를 스크롤하면 .reveal 클래스를 가진 요소들이 순차적으로 등장하는 효과를 확인할 수 있습니다.

이처럼 ScrollReveal을 활용하면 웹 페이지를 더 동적으로 만들 수 있습니다. 위에서 소개한 방법을 활용하여 요소의 순차 등장 효과를 구현해보세요!

참고 문서: ScrollReveal 공식 문서