ScrollMagic은 웹 페이지에서 스크롤 이벤트를 처리하기 위한 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 원하는 요소 또는 섹션이 특정 스크롤 위치에 도달했을 때 원하는 애니메이션을 쉽게 실행할 수 있습니다.

ScrollMagic 설치 및 설정

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

npm install scrollmagic --save

설치가 완료되면, 원하는 스크립트 파일에 ScrollMagic을 임포트해야 합니다.

import ScrollMagic from 'scrollmagic';

ScrollMagic 컨트롤러 생성

ScrollMagic을 사용하려면 컨트롤러를 먼저 생성해야 합니다. 컨트롤러는 페이지의 스크롤 이벤트를 감지하고 제어하는 역할을 합니다.

const controller = new ScrollMagic.Controller();

Scene 생성 및 애니메이션 추가

컨트롤러를 생성한 후에는 각각의 Scene을 생성하고 원하는 애니메이션을 추가할 수 있습니다. Scene은 특정 스크롤 위치에서 발생하는 이벤트를 나타냅니다.

const scene = new ScrollMagic.Scene({
    triggerElement: '.element', // 애니메이션이 시작되는 요소 선택자
    duration: 500, // 애니메이션의 지속 시간 (픽셀 단위)
    triggerHook: 0.5 // 애니메이션의 시작 위치를 설정 (0부터 1까지의 값)
})
.setClassToggle('.element', 'active') // 특정 클래스를 토글하는 애니메이션 추가
.addTo(controller); // Scene을 컨트롤러에 추가

위의 예제에서는 .element라는 클래스가 있는 요소가 화면의 중간 지점을 지나면 active라는 클래스를 토글하는 애니메이션을 정의하고 있습니다.

Scene 이벤트 처리

Scene이 특정 스크롤 위치에 도달했을 때 원하는 동작을 수행할 수 있습니다.

scene.on('enter', () => {
    // Scene이 화면에 들어왔을 때 실행되는 코드
});

scene.on('leave', () => {
    // Scene이 화면을 벗어났을 때 실행되는 코드
});

위의 예제에서는 Scene이 화면에 들어왔을 때와 화면을 벗어났을 때 각각에 대한 이벤트 처리 코드가 작성되어 있습니다.

요약

ScrollMagic을 사용하면 페이지 스크롤을 수동으로 제어하고 원하는 애니메이션을 적용할 수 있습니다. ScrollMagic의 다양한 기능을 활용하여 웹 페이지의 사용자 경험을 향상시킬 수 있습니다.

참고 자료

• ScrollMagic 공식 문서
• ScrollMagic GitHub 저장소