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

27 Nov 2023

javascript

일반적으로 웹 페이지에서 스크롤은 수직 방향으로 이루어집니다. 하지만 때로는 페이지 스크롤을 수평 방향으로 이동시키기 위해 ScrollMagic 라이브러리를 사용할 수 있습니다. 이 블로그 포스트에서는 ScrollMagic을 사용하여 페이지 스크롤을 수직 방향으로 이동하는 방법에 대해 알아보겠습니다.

ScrollMagic이란?

ScrollMagic은 마법처럼 작동하는 JavaScript 라이브러리로, 웹 페이지에 마우스 휠, 터치 이벤트 등을 통해 애니메이션 및 상호작용을 추가합니다. 이를 통해 사용자는 스크롤에 따라 원활하게 페이지를 탐색하고 매끄러운 애니메이션을 즐길 수 있습니다.

설치 및 설정

ScrollMagic을 사용하기 위해 먼저 해당 라이브러리를 다운로드하고 웹 페이지에 추가해야 합니다. 이를 위해 아래와 같은 단계를 따를 수 있습니다.

ScrollMagic 라이브러리를 다운로드합니다. ScrollMagic 다운로드 페이지에서 최신 버전을 다운로드할 수 있습니다.
다운로드한 파일을 원하는 위치에 저장합니다.
HTML 파일의 <head> 태그 내에 아래 코드를 추가하여 ScrollMagic 라이브러리를 페이지에 로드합니다.

<script src="path/to/scrollmagic.min.js"></script>

페이지 스크롤 구성

<body>
  <div class="section">
    <h2>Section 1</h2>
  </div>
  <div class="section">
    <h2>Section 2</h2>
  </div>
  <div class="section">
    <h2>Section 3</h2>
  </div>
</body>

위의 예시에서 각 div.section은 개별 섹션을 나타내며, 이 섹션들 간을 스크롤로 이동할 수 있도록 ScrollMagic을 설정하겠습니다.

ScrollMagic 구성

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

// Scene 생성 및 트리거 설정
$(".section").each(function() {
  var scene = new ScrollMagic.Scene({
    triggerElement: this,
    triggerHook: 0.8 // 스크롤 지점 설정 (0 ~ 1 사이)
  })
  .setClassToggle(this, "active") // 트리거되었을 때 추가/제거할 클래스 설정
  .addTo(controller); // ScrollMagic 컨트롤러에 Scene 추가
});

위의 JavaScript 코드는 ScrollMagic 컨트롤러를 생성하고, 각 섹션 요소에 대해 Scene을 설정합니다. triggerElement 속성은 Scene을 트리거하는 요소를 지정하고, triggerHook 속성은 트리거 지점을 설정합니다. 위의 예시에서는 섹션의 끝 부분에 도달했을 때 Scene이 트리거되도록 설정했습니다. 또한 setClassToggle 메서드를 통해 트리거되었을 때 섹션에 active 클래스를 추가/제거하도록 설정했습니다.

스크롤 애니메이션 구현

위의 설정을 통해 ScrollMagic이 페이지 스크롤을 감지하고 Scene을 트리거하도록 설정했습니다. 이제 애니메이션 효과를 추가하고 싶다면 ScrollMagic의 다양한 메서드와 옵션을 활용할 수 있습니다. 예를 들어, 섹션의 텍스트 요소를 위로 이동시키고 원래 위치로 복원하는 애니메이션을 추가하려면 다음과 같이 코드를 작성할 수 있습니다.

$(".section").each(function() {
  var scene = new ScrollMagic.Scene({
    triggerElement: this,
    triggerHook: 0.8
  })
  .setClassToggle(this, "active")
  .setTween(TweenMax.from(this, 0.5, { y: 100, opacity: 0, ease: Power1.easeOut })) // 애니메이션 설정
  .addTo(controller);
});

위의 예시에서는 setTween 메서드를 사용하여 트리거되었을 때 섹션을 위로 이동시키는 TweenMax 애니메이션을 추가했습니다. y 속성을 사용하여 이동 거리를 조정할 수 있고, opacity 속성을 사용하여 투명도를 조정할 수 있습니다. ease 옵션은 애니메이션의 진행 방식을 정의합니다.

결론

이렇게 ScrollMagic을 사용하여 웹 페이지의 스크롤을 수직 방향으로 이동시키는 방법을 알아보았습니다. ScrollMagic은 다양한 애니메이션 효과와 상호작용을 추가하는 데 유용한 도구입니다. 자세한 내용은 ScrollMagic 문서를 참조하시기 바랍니다.