[javascript] ScrollReveal을 이용한 요소 버블 애니메이션 구현 방법

01 Dec 2023

javascript

ScrollReveal은 웹 페이지 스크롤에 반응하여 요소를 동적으로 보여주는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 간편하게 요소를 애니메이션화할 수 있어 사용자에게 더욱 동적인 경험을 제공할 수 있습니다.

ScrollReveal 설치

먼저 ScrollReveal을 설치해야 합니다. npm을 사용하는 경우 아래 명령을 실행하여 패키지를 설치할 수 있습니다.

npm install scrollreveal

또는 CDN을 이용할 수도 있습니다.

<script src="https://unpkg.com/scrollreveal@4.0.7/dist/scrollreveal.min.js"></script>

ScrollReveal을 통한 버블 애니메이션 구현

다음은 ScrollReveal을 이용하여 요소에 버블 애니메이션을 구현하는 예제입니다. 스크롤 시에 요소가 나타나고 사라지는 애니메이션 효과를 주어 사용자에게 시각적으로 더욱 흥미로운 경험을 제공할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>버블 애니메이션</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="box">요소 1</div>
    <div class="box">요소 2</div>
    <div class="box">요소 3</div>
    <div class="box">요소 4</div>
  </div>

  <script src="https://unpkg.com/scrollreveal@4.0.7/dist/scrollreveal.min.js"></script>
  <script>
    // ScrollReveal 초기화
    ScrollReveal().reveal('.box', {
      delay: 200,
      duration: 1000,
      origin: 'bottom',
      distance: '50px',
      easing: 'ease-in-out',
      opacity: 0,
      scale: 0.5,
    });
  </script>
</body>
</html>

위의 예제 코드에서는 ScrollReveal을 사용하여 .box 클래스를 가지는 요소들에 애니메이션을 적용했습니다. reveal 메서드를 호출하여 애니메이션 효과의 옵션을 설정할 수 있습니다. 위의 예제에서는 delay, duration, origin, distance, easing, opacity, scale 옵션을 사용하여 애니메이션의 효과를 설정했습니다.

위의 코드를 실행하면 스크롤을 내리면 요소들이 나타날 때 버블처럼 확대되는 애니메이션을 볼 수 있습니다.

결론

ScrollReveal을 이용하여 요소에 버블 애니메이션을 구현하는 방법을 살펴보았습니다. ScrollReveal은 간단한 설정만으로도 다양한 애니메이션 효과를 구현할 수 있기 때문에 웹 페이지의 시각적인 효과를 향상시키고 사용자에게 더욱 흥미로운 경험을 제공할 수 있습니다. 더 많은 애니메이션 옵션과 기능을 사용하고자 한다면 ScrollReveal 공식 문서를 참고하시기 바랍니다.