[javascript] ScrollMagic을 사용하여 페이지 스크롤을 자동으로 제어하기

27 Nov 2023

웹 페이지에서 스크롤 이벤트를 제어하고자 할 때 ScrollMagic 라이브러리를 사용할 수 있습니다. ScrollMagic은 강력한 스크롤 애니메이션을 만들 수 있도록 도와주는 자바스크립트 라이브러리입니다.

ScrollMagic 설치

먼저 ScrollMagic을 사용하기 위해 필요한 패키지를 설치해야 합니다. npm을 사용한다면 다음과 같이 설치할 수 있습니다.

npm install scrollmagic

ScrollMagic을 사용하기 위해 초기화 작업이 필요합니다. 다음은 ScrollMagic을 초기화하는 간단한 예제입니다.

import ScrollMagic from 'scrollmagic';

const controller = new ScrollMagic.Controller();

ScrollMagic.Controller()를 호출하여 컨트롤러 객체를 초기화합니다.

스크롤 이벤트에 대한 반응을 정의하기 위해 Scene을 추가해야 합니다. 각 Scene은 특정한 스크롤 위치에서 트리거됩니다. 다음은 Scene을 추가하는 예제입니다.

const scene = new ScrollMagic.Scene({
  triggerElement: '#trigger',
})
  .setClassToggle('#target', 'active')
  .addTo(controller);

triggerElement 속성은 Scene이 트리거되는 위치를 지정합니다. setClassToggle 메소드는 트리거가 발생할 때 특정 요소에 클래스를 토글합니다. addTo 메소드는 컨트롤러에 Scene을 추가합니다.

스크롤 이벤트가 발생할 때 추가적인 작업을 수행하고자 할 경우 이벤트 리스너를 추가할 수 있습니다. 다음은 스크롤 이벤트에 반응하는 예제입니다.

scene.on('enter', () => {
  console.log('Scene entered');
});

scene.on('leave', () => {
  console.log('Scene left');
});

on 메소드를 사용하여 특정 이벤트에 반응할 수 있습니다. 위 예제에서는 enter 이벤트와 leave 이벤트에 각각 반응하는 코드를 작성했습니다.

ScrollMagic은 페이지 스크롤을 자동으로 제어하기 위한 강력한 도구입니다. 위 예제를 참고하여 ScrollMagic을 사용하여 웹 페이지에 인상적인 스크롤 애니메이션을 추가해 보세요!