ScrollMagic은 JavaScript 라이브러리로, 스크롤 이벤트를 사용하여 웹페이지에 애니메이션 및 상호 작용을 추가할 수 있습니다. 이번 튜토리얼에서는 ScrollMagic을 사용하여 페이지 스크롤을 일시 중지하는 방법을 알아보겠습니다.

ScrollMagic 설치 및 설정

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

npm install scrollmagic

ScrollMagic을 설치한 후, 다음과 같이 HTML 문서에 ScrollMagic과 GSAP(그린 소취 포식 에니메이션 플랫폼) 라이브러리를 포함시켜야 합니다.

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

ScrollMagic으로 페이지 스크롤 일시 중지하기

페이지 스크롤을 일시 중지하기 위해 ScrollMagic 컨트롤러를 생성하고, 해당 컨트롤러에 일시 중지할 요소들을 추가해야 합니다.

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

// 일시 중지할 요소 선택
var pauseElements = document.querySelectorAll('.pause-element');

// 각 요소에 대해 일시 중지 시점 설정
pauseElements.forEach(function(element) {
  var scene = new ScrollMagic.Scene({
    triggerElement: element,
    triggerHook: "onEnter",
    duration: 0
  })
  .setPin(element)
  .addTo(controller);
});

위 코드에서 pause-element 클래스를 가진 요소들이 페이지 스크롤을 일시 중지할 때 화면에 고정됩니다. 이를 위해 ScrollMagic.Scene을 사용하여 이벤트를 설정하고, ScrollMagic.Controller에 추가합니다. triggerElement 속성은 일시 중지 시점이 되는 요소를 선택하고, triggerHook 속성은 스크롤 위치를 나타냅니다. duration 속성은 일시 중지된 요소가 화면에 고정되는 기간을 설정합니다. setPin 메서드는 일시 중지된 요소를 고정시킵니다.

이제 페이지에 스크롤이 발생할 때, pause-element 클래스를 가진 요소들은 스크롤이 멈출 때 화면에 고정됩니다.

마치며

이번 튜토리얼에서는 ScrollMagic을 사용하여 페이지 스크롤을 일시 중지하는 방법을 알아보았습니다. ScrollMagic은 풍부한 기능을 제공하므로, 다양한 웹 프로젝트에서 활용할 수 있습니다. ScrollMagic 공식 문서를 참조하여 더 많은 기능과 사용 방법을 익히시기 바랍니다.

참고 자료

• ScrollMagic 공식 문서
• GSAP 공식 문서