[javascript] ScrollMagic을 사용하여 페이지 스크롤을 일시 중지하기

27 Nov 2023

javascript

웹 페이지의 스크롤 이벤트를 제어하기 위해 ScrollMagic 라이브러리를 사용할 수 있습니다. 이 라이브러리를 사용하면 페이지 스크롤을 일시 중지하거나 특정 위치에 애니메이션을 추가하는 등 다양한 기능을 구현할 수 있습니다.

ScrollMagic 설정하기

먼저 ScrollMagic 라이브러리를 사용하기 위해 CDN 또는 npm을 통해 라이브러리를 가져와야 합니다. 아래는 HTML 파일에서 CDN을 사용하는 예시입니다.

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
</head>
<body>
    <!-- 웹 페이지의 내용 -->
</body>
</html>

혹은 npm을 사용하여 ScrollMagic을 설치할 수도 있습니다.

npm install scrollmagic

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

ScrollMagic을 사용하면 특정 위치에 도달했을 때 스크롤을 일시 중지하는 기능을 구현할 수 있습니다. 간단한 예제를 통해 이를 살펴보겠습니다.

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

// 특정 요소를 선택하여 애니메이션 설정하기
var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger", // 애니메이션을 실행할 요소
    duration: "100%", // 애니메이션 실행 범위
    triggerHook: 0 // 애니메이션 실해 시점
})
.setPin("#element") // 애니메이션 실행 중에 고정될 요소
.addTo(controller); // 컨트롤러에 장면 추가

// 애니메이션 일시 중지하기
scene.on("enter", function() {
    controller.enabled(false);
});

// 애니메이션 재개하기
scene.on("leave", function() {
    controller.enabled(true);
});

위의 코드에서 triggerElement는 애니메이션이 실행될 요소를 선택합니다. duration은 애니메이션이 실행될 범위를 설정하고, triggerHook은 애니메이션이 실행될 시점을 설정합니다.

ScrollMagic 프로젝트의 공식 문서에서 더 많은 설정 옵션과 애니메이션 기능을 확인할 수 있습니다.

마무리

ScrollMagic은 웹 페이지에서 스크롤 이벤트를 제어하는 데 유용한 라이브러리입니다. 페이지 스크롤을 일시 중지하거나 애니메이션을 추가하는 등 다양한 효과를 적용할 수 있습니다. ScrollMagic을 사용하면 보다 인상적이고 유동적인 웹 페이지를 구현할 수 있습니다.