ScrollMagic은 JavaScript 라이브러리로, 웹 페이지의 스크롤 이벤트를 감지하고 사용자에게 다양한 애니메이션 및 상호작용 기능을 제공합니다. 이번 포스트에서는 ScrollMagic을 사용하여 페이지의 스크롤 속도를 얻어오는 방법을 알아보겠습니다.

ScrollMagic 설치하기

먼저, ScrollMagic을 설치해야 합니다. npm을 사용하는 경우 다음 명령어를 실행하여 ScrollMagic을 설치할 수 있습니다.

npm install scrollmagic

HTML 파일에 ScrollMagic 라이브러리를 추가하는 경우, 다음과 같이 CDN 링크를 사용할 수도 있습니다.

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

페이지 스크롤 속도 가져오기

우리의 목표는 사용자가 페이지를 스크롤할 때 스크롤 속도를 얻어오는 것입니다. ScrollMagic은 기본적으로 스크롤 속도를 계산하는 기능을 제공하지 않으므로, 이를 직접 구현해야 합니다.

먼저, 다음과 같이 HTML에 스크롤 위치를 표시할 요소를 추가합니다.

<div id="scroll-position"></div>

다음으로, JavaScript 코드를 작성하여 스크롤 속도를 얻어와서 표시해주는 기능을 구현합니다.

var controller = new ScrollMagic.Controller();

// scrollmagic의 스크롤 이벤트를 감지하는 scene 생성
var scene = new ScrollMagic.Scene({
  triggerElement: "#scroll-position", // 감지할 요소 선택
  triggerHook: "onEnter", // 요소가 페이지로 들어올 때 이벤트 발생
  duration: "100%" // 요소의 높이만큼 스크롤 이벤트 감지
})
.on("progress", function (e) {
  var scrollSpeed = e.progress.toFixed(2); // 소숫점 2자리까지 스크롤 속도 얻어오기
  console.log("Scroll Speed: " + scrollSpeed);
})
.addTo(controller);

위 코드에서는 ScrollMagic 컨트롤러를 생성한 후, 스크롤 이벤트를 감지할 scene을 생성합니다. triggerElement는 스크롤 이벤트를 감지할 요소를 선택합니다. triggerHook은 요소가 페이지로 들어올 때 이벤트가 발생하도록 설정합니다. duration은 요소의 높이만큼 스크롤 이벤트를 감지하도록 설정합니다.

on("progress", function (e) { ... })는 스크롤 이벤트가 발생할 때마다 실행되는 콜백 함수입니다. e.progress를 사용하여 소숫점 2자리까지 스크롤 속도를 얻어올 수 있습니다. 이 값을 변수에 저장하거나 적절히 활용할 수 있습니다. 위 예제에서는 콘솔에 스크롤 속도를 출력합니다.

마지막으로, addTo(controller)을 사용하여 scene을 컨트롤러에 추가합니다.

이제 페이지를 스크롤해보면, 개발자 도구 콘솔에 스크롤 속도가 출력됩니다.

결론

ScrollMagic을 사용하여 페이지의 스크롤 속도를 얻어오는 방법을 알아보았습니다. ScrollMagic은 다양한 스크롤 관련 기능을 제공하므로, 웹 페이지의 동적인 애니메이션 및 상호작용을 구현하는 데 유용하게 활용할 수 있습니다.

더 자세한 내용은 ScrollMagic 공식 문서를 참고하시기 바랍니다.