[javascript] ScrollMagic을 사용하여 요소의 스크롤 위치에 도달하면 특정 함수 호출하기

27 Nov 2023

javascript

ScrollMagic은 JavaScript 라이브러리로, 웹 페이지의 스크롤 이벤트를 다룰 수 있게 해줍니다. 이 라이브러리를 사용하여 요소의 스크롤 위치에 도달했을 때 특정 함수를 호출하는 방법을 알아보겠습니다.

설치하기

먼저 ScrollMagic을 설치해야 합니다. 아래의 명령을 사용하여 npm을 통해 ScrollMagic을 설치할 수 있습니다.

npm install scrollmagic

ScrollMagic 설정하기

import ScrollMagic from 'scrollmagic';
import { TweenMax } from 'gsap';

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

// 요소 선택하기
const element = document.getElementById('my-element');

// TweenMax를 사용하여 애니메이션 설정
const tween = TweenMax.to(element, 0.5, { opacity: 1 });

// ScrollMagic Scene 생성
const scene = new ScrollMagic.Scene({
  triggerElement: element,
  triggerHook: 'onEnter', // 요소가 화면에 들어올 때
})
  .setTween(tween)
  .addTo(controller);

위의 코드에서는 ScrollMagic.Controller를 생성하고, 원하는 요소를 선택한 후 TweenMax를 사용하여 애니메이션을 설정합니다. ScrollMagic.Scene을 생성하여 Scene의 트리거(element)와 트리거 후크(triggerHook)를 설정합니다. 트리거 후크는 언제 트리거를 발생시킬지를 결정합니다.

트리거 위치에 대한 특정 함수 호출하기

ScrollMagic을 사용하여 요소의 스크롤 위치에 도달했을 때 특정 함수를 호출하려면 addIndicators 옵션을 사용하여 Scene의 트리거 위치를 표시할 수 있습니다. 다음은 트리거 위치에 도달했을 때 호출될 함수의 예시입니다.

const scene = new ScrollMagic.Scene({
  triggerElement: element,
  triggerHook: 'onEnter',
  reverse: false, // 트리거 후 다시 돌아오지 않음
})
  .setTween(tween)
  .addIndicators() // 추가
  .on('enter', function () {
    // 트리거 위치에 도달하면 호출될 함수
    console.log('요소의 스크롤 위치에 도달했습니다!');
  })
  .addTo(controller);

위의 코드에서는 addIndicators 메서드를 사용하여 ScrollMagic.Scene을 디버깅 모드로 설정하고, on('enter') 이벤트 핸들러를 통해 트리거 위치에 도달했을 때 호출할 함수를 정의합니다.

이제 해당 요소가 스크롤될 때마다 특정 함수가 호출되는 ScrollMagic Scene을 구성할 수 있습니다. 위의 예시 코드를 참고하여 원하는 동작을 구현해보세요.

더 자세한 정보는 ScrollMagic 공식 문서를 참고하시기 바랍니다.