[javascript] ScrollReveal을 이용한 스크롤에 따라 요소 크기 조정 방법

01 Dec 2023

javascript

이번에는 ScrollReveal 라이브러리를 사용하여 스크롤에 따라 요소의 크기를 조정하는 방법에 대해 알아보겠습니다.

ScrollReveal은 웹 페이지에서 요소들을 특정 시점에서 나타나게 하거나 애니메이션 효과를 추가할 수 있는 JavaScript 라이브러리입니다. 우리는 이 라이브러리를 사용하여 요소의 크기를 스크롤에 따라 동적으로 조정할 것입니다.

ScrollReveal 설치

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

npm install scrollreveal

ScrollReveal 초기화

ScrollReveal을 사용하기 위해 우선 초기화해야 합니다. 아래의 코드를 HTML 문서의 <head> 태그 내에 추가하면 됩니다.

<script src="https://cdn.jsdelivr.net/npm/scrollreveal@4.0.7/dist/scrollreveal.min.js"></script>

요소 크기 조정하기

이제 ScrollReveal을 초기화했으므로 요소의 크기를 조정하는 코드를 작성해보겠습니다. 다음은 예시 코드입니다.

const sr = ScrollReveal();

sr.reveal('.element', {
  origin: 'bottom',
  distance: '50px',
  duration: 1000,
  scale: 0.5,
});

위 코드에서 .element는 크기를 조정할 요소의 클래스명입니다. origin은 애니메이션의 시작 지점을 지정하며, distance는 애니메이션의 거리를 지정합니다. duration은 애니메이션의 지속 시간을 지정하고, scale은 요소의 크기를 조정하는 비율을 지정합니다.

위의 예시 코드를 웹 페이지에 적용하면 스크롤에 따라 요소가 아래에서 위로 올라오면서 크기가 작아지는 애니메이션 효과를 볼 수 있을 것입니다.

요소 크기 조정 예시

아래의 예시 코드를 사용하여 ScrollReveal을 이용한 요소 크기 조정을 시도해볼 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <title>ScrollReveal Example</title>
  <script src="https://cdn.jsdelivr.net/npm/scrollreveal@4.0.7/dist/scrollreveal.min.js"></script>
</head>
<body>
  <div>
    <h1>ScrollReveal Example</h1>
    <p class="element">This is a sample text. Scroll down to see the effect!</p>
  </div>

  <script>
    const sr = ScrollReveal();

    sr.reveal('.element', {
      origin: 'bottom',
      distance: '50px',
      duration: 1000,
      scale: 0.5,
    });
  </script>
</body>
</html>

위의 예시 코드를 HTML 파일로 저장하고 웹 브라우저에서 실행해보면, 스크롤에 따라 텍스트가 아래에서 위로 올라가면서 크기가 점점 작아지는 효과를 볼 수 있을 것입니다.

마무리

이렇게 ScrollReveal을 이용하여 스크롤에 따라 요소의 크기를 조정하는 방법에 대해 알아보았습니다. ScrollReveal을 사용하면 웹 페이지에 다양한 애니메이션 효과를 추가할 수 있으므로, 웹 개발에서 동적인 요소들을 구현할 때 유용하게 사용할 수 있습니다.

더 많은 ScrollReveal의 옵션과 기능을 알고 싶다면, ScrollReveal 공식 문서를 참고해주세요.