스크롤 위치에 따라 웹 요소에 특정 클래스를 추가하고 싶은 경우가 많이 있습니다. 이를 구현하기 위해 ScrollMagic 라이브러리를 사용할 수 있습니다. ScrollMagic은 스크롤 이벤트를 다루기 쉽게 해주는 강력한 라이브러리입니다.

ScrollMagic 설치

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

npm install scrollmagic

또는 CDN을 통해 라이브러리를 불러올 수도 있습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>

HTML과 CSS 준비

스크롤 위치에 따라 클래스를 추가할 HTML 요소를 준비합니다. 예를 들어, <div> 요소에 active 클래스를 추가하고 싶다고 가정해봅시다.

<div id="target"></div>

해당 클래스에 원하는 스타일을 CSS로 지정해줍니다.

.active {
  background-color: red;
}

ScrollMagic 사용하기

스크롤 위치에 따라 active 클래스가 추가되고 제거되는 동작을 구현해보겠습니다.

// ScrollMagic 객체 생성
var controller = new ScrollMagic.Controller();

// Scene 생성
var scene = new ScrollMagic.Scene({
  triggerElement: "#target", // 트리거 엘리먼트로 요소의 ID를 지정
  triggerHook: "onEnter" // 요소가 스크롤 영역에 진입할 때 트리거됨
})
  .addTo(controller) // 컨트롤러에 씬 추가
  .on("enter", function () { // 요소가 스크롤 영역에 진입했을 때 실행되는 이벤트 핸들러
    document.getElementById("target").classList.add("active"); // 클래스 추가
  })
  .on("leave", function () { // 요소가 스크롤 영역을 벗어날 때 실행되는 이벤트 핸들러
    document.getElementById("target").classList.remove("active"); // 클래스 제거
  });

위 코드에서 triggerElement에는 스크롤 이벤트를 트리거할 HTML 요소의 ID를 지정합니다. triggerHook에는 트리거를 실행할 위치를 지정합니다. 다양한 옵션들을 사용하여 원하는 조건에 따라 스크롤 이벤트를 트리거할 수 있습니다.

on("enter")와 on("leave")를 사용하여 요소가 스크롤 영역에 진입하거나 벗어났을 때 실행되는 이벤트 핸들러를 등록합니다. 이 부분에서 원하는 동작을 구현할 수 있습니다.

결과 확인하기

위의 코드를 HTML 파일에 추가하고 파일을 브라우저에서 열면, 스크롤을 내릴 때 <div> 요소에 active 클래스가 추가되어 배경색이 빨간색으로 변하는 것을 확인할 수 있습니다.

참고 자료

• ScrollMagic 공식 문서
• ScrollMagic API 문서