[javascript] ScrollMagic을 사용하여 페이지 스크롤을 수동으로 제어하기

27 Nov 2023

javascript

ScrollMagic 소개

ScrollMagic은 JavaScript 기반의 라이브러리로, 스크롤 이벤트를 쉽게 다룰 수 있게 도와주는 도구입니다. 이 라이브러리는 ScrollMagic.Controller 객체를 사용하여 웹 페이지의 스크롤 이벤트를 모니터링하고 다양한 애니메이션 효과를 적용할 수 있습니다. 기존의 스크롤 이벤트 처리를 간편하게 할 수 있어 웹 페이지의 사용자 경험을 향상시키는 데 도움이 됩니다.

수동으로 페이지 스크롤 제어하기

ScrollMagic을 사용하여 페이지 스크롤을 수동으로 제어하기 위해서는 몇 가지 단계를 따라야 합니다.

HTML과 CSS 작성: 스크롤 이벤트를 적용할 HTML 요소와 해당 요소에 적용할 CSS 스타일을 작성합니다.

<div class="scrollmagic-element">
  <!-- 스크롤 이벤트를 적용할 요소 -->
</div>

JavaScript 라이브러리 추가: ScrollMagic을 사용하기 위해 먼저 ScrollMagic 및 관련 라이브러리를 웹 페이지에 추가합니다.

<script src="scrollmagic.min.js"></script>
<script src="animation.gsap.js"></script>

ScrollMagic 컨트롤러 생성: 스크롤 이벤트를 모니터링하고 제어할 ScrollMagic 컨트롤러를 생성합니다.

var controller = new ScrollMagic.Controller();

씬(Scene)과 트리거(Trigger) 설정: 스크롤 이벤트를 적용할 씬과 씬의 트리거를 설정합니다.

var scene = new ScrollMagic.Scene({
  triggerElement: ".scrollmagic-element",
  duration: 300 // 스크롤 시간 (300ms)
})

애니메이션 효과 설정: ScrollMagic 씬에 적용할 애니메이션 효과를 설정합니다.

.setTween(TweenMax.to(".scrollmagic-element", 1, {opacity: 0, scale: 0.5}))

컨트롤러에 씬 등록: 컨트롤러에 설정한 씬을 등록하여 스크롤 이벤트를 적용합니다.

.controller(controller)

이벤트 핸들러 등록: ScrollMagic 컨트롤러의 이벤트를 처리하기 위해 이벤트 핸들러를 등록합니다.

.on("enter", function (event) {
  // 스크롤이 씬에 진입할 때 실행할 코드
})
.on("leave", function (event) {
  // 스크롤이 씬을 벗어날 때 실행할 코드
});

위의 단계를 따라서 ScrollMagic을 사용하여 페이지 스크롤을 수동으로 제어할 수 있습니다. 필요에 따라 다양한 옵션과 애니메이션 효과를 설정하여 페이지의 스크롤 이벤트를 멋지게 제어할 수 있습니다.

목차

ScrollMagic 소개

수동으로 페이지 스크롤 제어하기

참고 자료