[javascript] ScrollMagic을 사용하여 페이지 스크롤 위치를 얻어오기

27 Nov 2023

ScrollMagic은 JavaScript 라이브러리로, 페이지 스크롤에 따라 요소를 애니메이션화할 수 있습니다. ScrollMagic을 사용하여 현재 페이지의 스크롤 위치를 얻어오는 방법을 알아보겠습니다.

ScrollMagic 설치하기

먼저, ScrollMagic을 프로젝트에 설치해야 합니다. npm을 사용하는 경우, 다음 명령어를 실행하여 ScrollMagic을 설치합니다.

npm install scrollmagic

ScrollMagic을 사용하려면 해당 요소에 대한 컨트롤러를 생성해야 합니다. 예를 들어, 페이지의 body 요소에 대한 컨트롤러를 생성하려면 다음과 같이 코드를 작성합니다.

import ScrollMagic from 'scrollmagic';

const controller = new ScrollMagic.Controller();

이제 스크롤 위치를 얻기 위한 이벤트를 추가해야 합니다. ScrollMagic 컨트롤러의 scroll 이벤트를 사용하여 현재 스크롤 위치를 감지할 수 있습니다.

controller.on('scroll', (event) => {
  const scrollPos = event.scrollPos; // 현재 스크롤 위치
  console.log(scrollPos);
});

위 코드에서 scrollPos 변수에는 현재 페이지의 스크롤 위치가 저장됩니다. 이 위치를 사용하여 원하는 애니메이션 등을 구현할 수 있습니다.