[javascript] ScrollMagic을 사용하여 페이지 스크롤을 수직 방향으로 제어하기
목차
ScrollMagic이란?
ScrollMagic은 웹 페이지의 스크롤 이벤트를 감지하고 해당 이벤트에 대한 트리거를 설정할 수 있는 자바스크립트 라이브러리입니다. 페이지 스크롤을 이용한 애니메이션 효과나 요소의 등장/사라짐을 제어할 때 매우 유용하게 사용할 수 있습니다.
ScrollMagic 설치
ScrollMagic은 NPM을 통해 쉽게 설치할 수 있습니다. 다음 명령을 사용하여 설치하세요.
npm install scrollmagic
ScrollMagic 기본 사용법
ScrollMagic을 사용하기 위해 먼저 ScrollMagic 객체를 생성해야 합니다. 다음은 기본적인 ScrollMagic의 사용법입니다.
import ScrollMagic from 'scrollmagic';
// ScrollMagic 객체 생성
var controller = new ScrollMagic.Controller();
// Scene 생성
var scene = new ScrollMagic.Scene({
triggerElement: '.trigger', // 트리거 요소
duration: 400 // 트리거가 발동되는 스크롤 범위
})
.setClassToggle('.element', 'active') // 트리거 발동 시 토글할 클래스
.addTo(controller); // 컨트롤러에 Scene 추가
위 코드에서 .trigger라는 클래스를 가진 요소가 스크롤되면 .element라는 클래스가 토글됩니다. ScrollMagic은 Scene 객체를 사용하여 트리거 요소, 스크롤 범위 및 토글할 클래스를 설정합니다.
ScrollMagic을 사용하여 페이지 스크롤 제어하기
이제 ScrollMagic을 사용하여 페이지 스크롤을 수직 방향으로 제어해보겠습니다. 예를 들어, 스크롤이 일정 범위에 도달하면 헤더의 배경색을 변경하거나, 요소가 나타났다 사라지는 효과를 주고 싶다면 ScrollMagic을 사용할 수 있습니다.
import ScrollMagic from 'scrollmagic';
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: '.trigger',
duration: 300
})
.setClassToggle('.header', 'active') // 스크롤 범위에 도달하면 토글할 클래스 설정
.addTo(controller);
위 코드에서는 .trigger 클래스를 가진 요소가 스크롤되면 .header 클래스에 active 클래스가 토글됩니다. 이는 헤더의 배경색을 변경하는 애니메이션 효과를 제공할 수 있습니다.
ScrollMagic을 사용하여 페이지 스크롤을 수직 방향으로 제어하는 방법을 살펴보았습니다. ScrollMagic은 다양한 설정 옵션과 기능을 제공하므로 필요에 따라 다양한 애니메이션 효과를 구현할 수 있습니다.