[javascript] ScrollMagic을 사용하여 웹 페이지에 스크롤 애니메이션 추가하기

27 Nov 2023

javascript

웹 페이지에 스크롤 애니메이션을 추가하는 것은 사용자들에게 더욱 흥미로운 경험을 제공하는 좋은 방법입니다. ScrollMagic은 JavaScript 기반의 라이브러리로, 페이지 스크롤에 따라 요소를 애니메이션하는 기능을 제공합니다. 이번 글에서는 ScrollMagic을 사용하여 웹 페이지에 스크롤 애니메이션을 추가하는 방법에 대해 알아보겠습니다.

ScrollMagic 설치하기

ScrollMagic을 사용하려면 먼저 해당 라이브러리를 설치해야 합니다. 아래의 npm 명령어를 사용하여 ScrollMagic을 설치할 수 있습니다.

npm install scrollmagic

ScrollMagic 기본 설정

ScrollMagic을 사용하기 위해 아래와 같이 ScrollMagic을 import 해주어야 합니다.

import ScrollMagic from 'scrollmagic';

그리고 ScrollMagic 감시자(Scen)를 생성해야 합니다. 감시자는 스크롤 위치에 따라 요소에 애니메이션을 추가하는 역할을 합니다. 아래의 코드로 감시자를 생성할 수 있습니다.

const controller = new ScrollMagic.Controller();

ScrollMagic 요소 애니메이션 추가하기

스크롤 애니메이션을 추가할 요소를 선택한 후, setClassToggle 메소드를 사용하여 해당 요소에 애니메이션 클래스를 토글할 수 있습니다. 아래의 코드는 요소에 active 클래스를 토글하여 애니메이션을 추가하는 예시입니다.

const scene = new ScrollMagic.Scene({
  triggerElement: '.target-element',
  // 요소가 화면의 중앙에 도달했을 때 애니메이션 실행
  triggerHook: 0.5,
})
.setClassToggle('.target-element', 'active')
.addTo(controller);

위의 코드에서 triggerElement는 애니메이션을 추가할 요소를 선택하기 위한 CSS 선택자입니다. triggerHook은 어느 시점에서 애니메이션이 실행될지를 설정하는 값입니다. 0.5는 요소가 화면의 중앙에 도달했을 때 애니메이션을 실행하도록 설정한 것입니다.

추가적인 ScrollMagic 옵션

ScrollMagic은 다양한 옵션을 제공하여 스크롤 애니메이션을 더욱 다양하고 정교하게 제어할 수 있습니다. 몇 가지 예시 옵션을 살펴보겠습니다.

duration: 애니메이션이 실행되는 시간을 설정합니다.
offset: 애니메이션이 실행되는 스크롤 위치를 조절합니다.

const scene = new ScrollMagic.Scene({
  triggerElement: '.target-element',
  duration: '300',    // 300ms 동안 애니메이션 실행
  offset: '50',       // 시작되기 전 50px 이전에서 애니메이션 실행
})
.setClassToggle('.target-element', 'active')
.addTo(controller);

ScrollMagic을 활용한 웹 페이지 스크롤 애니메이션 예시

이제 ScrollMagic을 사용하여 웹 페이지에 스크롤 애니메이션을 추가하는 방법에 대해 알아보았습니다. 여기서는 간단한 예시를 통해 실제 구현을 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    .target-element {
      width: 200px;
      height: 200px;
      background-color: red;
    }
    .target-element.active {
      transform: rotate(180deg);
    }
  </style>
</head>
<body>
  <div class="target-element"></div>

  <script src="https://unpkg.com/scrollmagic"></script>
  <script>
    const controller = new ScrollMagic.Controller();
    const scene = new ScrollMagic.Scene({
      triggerElement: '.target-element',
      triggerHook: 0.5,
    })
    .setClassToggle('.target-element', 'active')
    .addTo(controller);
  </script>
</body>
</html>

위의 예시에서는 target-element라는 클래스가 추가 된 경우 요소가 180도 회전하는 애니메이션을 추가합니다. 스크롤에 따라 요소가 화면의 중앙에 도달하면 active 클래스가 추가되고 애니메이션이 실행되는 것을 확인할 수 있습니다.

이처럼 ScrollMagic을 사용하여 웹 페이지에 스크롤 애니메이션을 추가할 수 있습니다. ScrollMagic은 다양한 옵션과 기능을 제공하므로 원하는 애니메이션 효과를 구현하는 데 유용한 도구입니다.

참고 자료

ScrollMagic 공식 문서: http://scrollmagic.io/
ScrollMagic GitHub 저장소: https://github.com/janpaepke/ScrollMagic