ScrollMagic은 JavaScript 라이브러리로, 페이지 스크롤 이벤트를 감지하고 해당 이벤트에 따라 원하는 동작을 수행할 수 있습니다. 이번 글에서는 ScrollMagic을 사용하여 페이지 스크롤 이벤트 동작 여부를 설정하는 방법에 대해 알아보겠습니다.

ScrollMagic 설치

먼저, ScrollMagic을 사용하기 위해 npm을 통해 패키지를 설치해야 합니다. 아래의 명령어를 사용하여 ScrollMagic을 설치합니다.

npm install scrollmagic

ScrollMagic 초기화

ScrollMagic을 사용하기 위해서는 먼저 해당 라이브러리를 초기화해야 합니다. 아래의 코드를 사용하여 ScrollMagic을 초기화합니다.

import ScrollMagic from 'scrollmagic';

const controller = new ScrollMagic.Controller();

위의 코드는 ScrollMagic을 import하고, Controller 객체를 생성하여 초기화한 것입니다.

페이지 스크롤 동작 감지

ScrollMagic은 페이지 스크롤 이벤트를 감지하기 위해 Scene 객체를 사용합니다. setClassToggle 메서드를 사용하여 원하는 요소에 클래스를 토글할 수 있습니다. 아래의 코드는 페이지 스크롤 시 원하는 요소에 ‘active’ 클래스를 추가하는 예제입니다.

const scene = new ScrollMagic.Scene({
  triggerElement: '#trigger',
  triggerHook: 0.8, // 스크롤 동작 감지 여부를 조절하는 값입니다. 0부터 1 사이의 값으로 설정할 수 있습니다.
})
  .setClassToggle("#element", "active")
  .addTo(controller);

위의 코드에서 triggerElement 옵션은 특정 요소의 스크롤 위치를 기준으로 스크롤 이벤트를 동작시킬지를 결정합니다. triggerHook 옵션은 스크롤 동작의 감지 여부를 조절하는 값으로, 0.8은 페이지의 하단에서 80% 정도 스크롤되었을 때 동작을 수행하겠다는 의미입니다.

여기서 #trigger는 스크롤 이벤트 감지의 기준이 될 요소의 id 값이며, #element는 스크롤 이벤트 발생 시 클래스를 추가하거나 제거할 요소의 id 값입니다.

위 코드를 사용하여 페이지 스크롤 감지 이벤트를 설정하고, 원하는 동작을 수행할 수 있습니다.

결론

ScrollMagic은 페이지 스크롤 이벤트를 감지하고 원하는 동작을 수행할 수 있는 강력한 라이브러리입니다. 위에서 살펴본 예제를 참고하여 ScrollMagic을 사용하여 페이지 스크롤 이벤트 동작 여부를 설정해보세요.

참고 자료

• ScrollMagic 공식 문서