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

27 Nov 2023

javascript

본 문서에서는 ScrollMagic 라이브러리를 사용하여 웹 페이지를 가로로 스크롤하는 방법을 알아보겠습니다.

ScrollMagic 소개

ScrollMagic은 jQuery 플러그인이며, 페이지 스크롤과 관련된 다양한 이벤트를 감지하고 처리하는 기능을 제공합니다. 이를 사용하여 페이지의 다양한 부분을 매력적으로 만들 수 있습니다. 이 중에서도 가로 스크롤은 사용자들에게 독특한 경험을 제공할 수 있는 기능입니다.

ScrollMagic 설치

ScrollMagic은 CDN이나 패키지 매니저를 통해 설치할 수 있습니다. 여기서는 CDN을 사용하여 설치하는 방법을 알아보겠습니다.

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

위 코드를 HTML 문서의 head 태그에 추가하면 ScrollMagic 라이브러리와 Debug AddIndicators 플러그인을 사용할 준비가 됩니다.

가로 스크롤 구현하기

아래 예제에서는 ScrollMagic을 사용하여 페이지의 다양한 섹션을 가로로 스크롤하는 기능을 구현해 보겠습니다.

<div class="container">
  <section class="section" id="section1">
    <h2>Section 1</h2>
  </section>
  <section class="section" id="section2">
    <h2>Section 2</h2>
  </section>
  <section class="section" id="section3">
    <h2>Section 3</h2>
  </section>
</div>

.container {
  width: 100%;
  height: 100vh;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

.section {
  width: 100%;
  height: 100%;
}

// ScrollMagic Controller 생성
var controller = new ScrollMagic.Controller();

// 각 섹션을 가로로 스크롤하기 위한 Tween 생성
var section1Tween = new TimelineMax().to("#section1", 1, { x: "-100%" });
var section2Tween = new TimelineMax().to("#section2", 1, { x: "-100%" });
var section3Tween = new TimelineMax().to("#section3", 1, { x: "-100%" });

// ScrollMagic Scene 생성
new ScrollMagic.Scene({
  triggerElement: ".container",
  duration: "300%", // 스크롤하는 거리 설정
  triggerHook: 0,
})
  .setPin(".container")
  .setTween(new TimelineMax().add([section1Tween, section2Tween, section3Tween]))
  .addTo(controller);

위 코드는 div.container를 가로로 스크롤 가능하도록 설정하고, 각 섹션을 가로로 이동하는 sectionTween을 생성하여 ScrollMagic Scene에 추가한 예제입니다. 이 예제는 세 가지 섹션으로 구성되어 있으며, 스크롤 시 각 섹션이 왼쪽으로 이동합니다.

마치며

ScrollMagic을 사용하여 페이지의 가로 스크롤을 구현하는 방법에 대해 알아보았습니다. ScrollMagic은 다양한 이벤트와 기능을 제공하기 때문에 페이지의 매력을 높일 수 있습니다. 추가로 필요한 기능은 ScrollMagic의 공식 문서를 참고하시기 바랍니다.

참고 문서: