[javascript] ScrollReveal을 활용한 세로 스크롤 효과 구현 방법

01 Dec 2023

javascript

세로 스크롤 효과는 웹 페이지에 인터랙티브한 요소를 추가하여 사용자에게 동적인 경험을 제공하는데 많이 사용됩니다. 이번 글에서는 ScrollReveal 라이브러리를 활용하여 세로 스크롤 효과를 구현하는 방법을 알아보겠습니다.

ScrollReveal이란?

ScrollReveal은 JavaScript 라이브러리로, 웹 페이지의 스크롤 이벤트를 감지하여 요소들을 동적으로 나타나게 하는 기능을 제공합니다. 이를 이용하면 페이지 스크롤 시 요소들이 부드럽게 나타나는 효과를 구현할 수 있습니다.

ScrollReveal 사용법

ScrollReveal 라이브러리를 다운로드하고 HTML 파일에 포함합니다. 예를 들어, 아래와 같은 코드를 <head> 태그 안에 추가합니다.

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

스크롤 효과를 적용할 요소들을 선택합니다. 선택된 요소들은 나타나고 사라지는 애니메이션 효과를 받게 됩니다. 예를 들어, 아래의 HTML 코드에서 data-sr 속성을 추가하여 요소를 선택할 수 있습니다.

<div class="reveal" data-sr></div>

스크립트를 작성하여 ScrollReveal을 초기화합니다. 아래의 예제 코드처럼 ScrollReveal() 메소드를 사용하여 초기화한 뒤, reveal() 메소드로 요소를 나타내는 애니메이션 효과를 정의할 수 있습니다.

const sr = ScrollReveal();

sr.reveal('.reveal', {
  origin: 'top',
  distance: '20px',
  duration: 1000,
  delay: 200,
  easing: 'ease',
});

위의 코드에서 origin은 요소가 나타날 위치를 지정하고, distance는 나타나는 동안 이동할 거리를 지정합니다. duration은 애니메이션의 지속 시간을, delay는 애니메이션 시작까지의 지연 시간을, easing은 애니메이션의 이징(easing) 함수를 지정합니다.

웹 페이지에서 스크롤을 테스트하여 스크롤 효과를 확인합니다.

예제

다음은 ScrollReveal을 사용하여 세로 스크롤 효과를 구현한 간단한 예제 코드입니다.

<!DOCTYPE html>
<html>
<head>
  <title>ScrollReveal Example</title>
  <script src="https://unpkg.com/scrollreveal"></script>
  <style>
    .reveal {
      opacity: 0;
    }
  </style>
</head>
<body>
  <div class="reveal" data-sr>
    <h1>Hello, ScrollReveal!</h1>
  </div>

  <script>
    const sr = ScrollReveal();

    sr.reveal('.reveal', {
      origin: 'top',
      distance: '20px',
      duration: 1000,
      delay: 200,
      easing: 'ease',
    });
  </script>
</body>
</html>

위의 코드를 웹 페이지에 추가하고 스크롤을 테스트해보면, 요소가 위에서 아래로 나타나는 세로 스크롤 효과를 확인할 수 있습니다.

결론

위에서 설명한 것처럼 ScrollReveal을 활용하면 세로 스크롤 효과를 쉽게 구현할 수 있습니다. 추가적으로 ScrollReveal은 다양한 옵션과 설정을 제공하므로, 사용자의 요구에 맞게 세부적인 컨트롤이 가능합니다.

더 자세한 사용 방법과 옵션에 대해서는 ScrollReveal 공식 문서를 참고하시길 바랍니다.