[javascript] ScrollMagic을 사용하여 페이지 스크롤을 가로 방향으로 이동하기

27 Nov 2023

javascript

ScrollMagic은 JavaScript 기반의 라이브러리로, 웹 페이지의 스크롤 이벤트를 감지하고 다양한 애니메이션 효과를 적용할 수 있게 해줍니다. 이번 포스트에서는 ScrollMagic을 사용하여 웹 페이지를 가로 방향으로 스크롤할 수 있는 기능을 구현해보겠습니다.

ScrollMagic 설치

먼저 ScrollMagic을 설치해야 합니다. npm을 사용하여 설치할 수 있습니다.

npm install scrollmagic

프로젝트에 ScrollMagic 추가하기

ScrollMagic을 사용하기 위해 해당 라이브러리를 프로젝트에 추가합니다. HTML 파일의 <head> 태그 내에 아래 스크립트 태그를 추가합니다.

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

가로 스크롤 구현하기

이제 ScrollMagic을 사용하여 페이지를 가로 방향으로 스크롤할 수 있는 기능을 구현해보겠습니다.

// ScrollMagic 컨트롤러 생성
var controller = new ScrollMagic.Controller();

// 가로 스크롤을 적용할 요소 선택
var horizontalScrollSections = document.querySelectorAll('.horizontal-scroll-section');

// 각 요소에 ScrollMagic 씬(Scene)을 추가하여 가로 스크롤 효과 적용
horizontalScrollSections.forEach(function(section) {
  var scene = new ScrollMagic.Scene({
    triggerElement: section,
    triggerHook: 0,
    duration: "100%" // 요소 크기만큼 가로 스크롤 가능
  })
  .setPin(section) // 요소 고정
  .addTo(controller); // 컨트롤러에 Scene 추가
});

위의 코드에서는 horizontal-scroll-section 클래스를 가진 요소들에 ScrollMagic 씬을 추가하고, 해당 요소들을 가로로 스크롤할 수 있도록 설정하고 있습니다. triggerElement는 씬이 활성화되기 위해 기다리는 요소를 지정하고, triggerHook은 씬이 어느 위치에서 시작될지를 설정합니다. duration은 가로 스크롤이 가능한 범위를 설정하는데, "100%"로 설정하면 요소의 크기만큼 가로 스크롤이 가능하게 됩니다. setPin() 메서드는 요소를 고정시켜줍니다.

마치며

위의 예제를 통해 ScrollMagic을 사용하여 웹 페이지의 가로 방향 스크롤을 구현하는 방법을 알아보았습니다. ScrollMagic은 다양한 애니메이션 효과를 추가할 수 있어 웹 페이지의 인터랙티브한 요소를 만들기에 매우 유용한 라이브러리입니다. 추가적인 설정이나 기능은 ScrollMagic 공식 문서를 참고하시면 도움이 될 것입니다.

ScrollMagic 공식 문서: https://scrollmagic.io/
ScrollMagic GitHub 저장소: https://github.com/janpaepke/ScrollMagic