ScrollMagic은 JavaScript 기반의 라이브러리로, 웹 페이지의 스크롤 이벤트를 감지하고 다양한 애니메이션 효과를 적용할 수 있습니다. 이번에는 ScrollMagic을 사용하여 페이지 스크롤 방향을 얻어오는 방법에 대해 알아보겠습니다.
ScrollMagic 설치하기
먼저, ScrollMagic을 프로젝트에 설치해야 합니다. npm을 사용하는 경우 아래 명령어를 실행하여 설치합니다.
npm install scrollmagic
ScrollMagic 초기화하기
ScrollMagic을 사용하기 위해 먼저 ScrollMagic 객체를 초기화해야 합니다. 다음 코드를 사용하여 초기화합니다.
import ScrollMagic from 'scrollmagic';
const scrollController = new ScrollMagic.Controller();
스크롤 방향 감지하기
이제 페이지의 스크롤 방향을 감지할 수 있습니다. ScrollMagic은 Scene 객체를 사용하여 다양한 스크롤 이벤트를 감지할 수 있습니다. 스크롤 이벤트를 감지하려는 엘리먼트에 적용할 Scene 객체를 만듭니다.
const scrollDirectionScene = new ScrollMagic.Scene({
triggerElement: '#trigger-element', // 스크롤 이벤트를 감지할 엘리먼트
triggerHook: 0, // 엘리먼트의 상단으로 스크롤이 도달하면 이벤트를 발생시킴
})
.setClassToggle('#trigger-element', 'scroll-up') // 스크롤 방향이 위쪽인 경우 'scroll-up' 클래스 추가
.on('enter', (event) => {
console.log('Scroll down'); // 스크롤 방향이 아래쪽인 경우 로그 출력
})
.on('leave', (event) => {
console.log('Scroll up'); // 스크롤 방향이 위쪽인 경우 로그 출력
})
.addTo(scrollController);
위 코드에서 triggerElement는 스크롤 이벤트를 감지할 엘리먼트의 선택자를 지정합니다. triggerHook은 엘리먼트의 상단으로 스크롤이 도달하면 이벤트를 발생시킬지 여부를 결정합니다.
setClassToggle 메서드를 사용하여 스크롤 방향에 따라 클래스를 추가하거나 제거할 수 있습니다. 위 예제에서는 스크롤 방향이 위쪽인 경우 ‘scroll-up’ 클래스를 추가합니다.
또한, on 메서드를 사용하여 각각 ‘enter’와 ‘leave’ 이벤트를 처리하는 함수를 등록할 수 있습니다. 위 예제에서는 ‘enter’ 이벤트에서는 ‘Scroll down’을, ‘leave’ 이벤트에서는 ‘Scroll up’을 출력합니다.
마지막으로, addTo(scrollController)를 사용하여 Scene 객체를 scrollController에 추가합니다.
결론
ScrollMagic을 사용하여 페이지의 스크롤 방향을 감지하는 방법에 대해 알아보았습니다. ScrollMagic은 다양한 스크롤 이벤트를 쉽게 감지할 수 있으며, 이를 활용하여 다양한 애니메이션 효과를 구현할 수 있습니다.