[javascript] ScrollMagic을 사용하여 페이지 스크롤을 특정 위치로 이동하기

27 Nov 2023

javascript

이번 포스트에서는 ScrollMagic 라이브러리를 사용하여 웹 페이지 스크롤을 특정 위치로 이동하는 방법에 대해 알아보겠습니다.

ScrollMagic 소개

ScrollMagic은 스크롤 이벤트에 따라 웹 페이지를 제어할 수 있는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 스크롤 위치, 스크롤 방향, 스크롤 속도 등의 정보를 쉽게 확인할 수 있습니다.

ScrollMagic 설치

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

npm install scrollmagic

ScrollMagic 사용하기

ScrollMagic을 사용하여 페이지 스크롤을 특정 위치로 이동하는 방법은 다음과 같습니다.

ScrollMagic 객체 생성

import ScrollMagic from 'scrollmagic';
const controller = new ScrollMagic.Controller();

ScrollMagic 객체를 생성하고 컨트롤러를 할당합니다.

Scene 생성
```
const scene = new ScrollMagic.Scene({
    triggerElement: '#trigger',
    duration: 500
});
```
특정 요소와 스크롤 간의 상호작용을 정의하는 Scene 객체를 생성합니다. triggerElement는 트리거할 요소의 선택자를 지정하고, duration은 애니메이션 지속 시간을 나타냅니다.

Scene 이벤트 처리

scene.on('enter', function () {
    // 특정 위치로 스크롤 이벤트가 발생했을 때 실행할 코드 작성
});

Scene 객체에서 발생하는 이벤트를 처리하는 함수를 작성합니다.

Scene 추가
```
scene.addTo(controller);
```
생성한 Scene을 컨트롤러에 추가합니다.
애니메이션 작성
```
const tween = gsap.to('.element', {
    opacity: 1,
    x: 100,
    duration: 1
});
```
원하는 애니메이션을 작성합니다. 위 예제에서는 요소의 투명도와 x 위치를 변경하는 애니메이션을 사용합니다.
애니메이션과 Scene 연결
```
scene.setTween(tween);
```
작성한 애니메이션을 Scene과 연결합니다.

웹 페이지에 ScrollMagic 코드 추가

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

ScrollMagic 및 필요한 플러그인을 웹 페이지에 추가합니다.

결론

ScrollMagic을 사용하면 웹 페이지의 스크롤 이벤트를 감지하고 특정 위치로 이동하는 애니메이션을 쉽게 구현할 수 있습니다. 위 코드를 참고하여 원하는 스크롤 이벤트를 만들어 보세요!

ScrollMagic 소개

ScrollMagic 설치

ScrollMagic 사용하기

결론

참고 자료