[javascript] ScrollMagic을 사용하여 페이지 스크롤을 감추거나 보이기

27 Nov 2023

javascript

많은 웹사이트에서 스크롤 애니메이션을 구현하기 위해 ScrollMagic 라이브러리를 사용합니다. 이 라이브러리를 사용하면 페이지 스크롤에 따라 요소를 감추거나 보일 수 있습니다. 이번 포스트에서는 ScrollMagic을 사용하여 페이지 스크롤에 따라 요소를 감추거나 보이는 방법에 대해 알아보겠습니다.

ScrollMagic 설치 및 설정

ScrollMagic을 사용하기 위해서는 먼저 해당 라이브러리를 설치해야 합니다. 다음과 같이 npm을 사용하여 ScrollMagic을 설치할 수 있습니다.

npm install scrollmagic

그리고 프로젝트에서 ScrollMagic을 사용하고 싶은 파일에 다음과 같이 라이브러리를 import해야 합니다.

import ScrollMagic from 'scrollmagic';
// 그 외의 필요한 모듈들을 import

// ScrollMagic을 초기화하는 코드
const controller = new ScrollMagic.Controller();
// 다음부터는 controller 객체를 사용하여 ScrollMagic을 제어할 수 있습니다.

요소를 감추는 기본적인 예제

이제 ScrollMagic을 사용하여 페이지 스크롤에 따라 요소를 감추는 방법을 알아보겠습니다.

import ScrollMagic from 'scrollmagic';

const controller = new ScrollMagic.Controller();

// 감추고자 하는 요소를 선택합니다.
const elementToHide = document.getElementById('element-to-hide');

// 요소를 감추는 애니메이션을 생성합니다.
const hideAnimation = new TimelineMax()
    .to(elementToHide, 0.5, {opacity: 0, display: "none"});

// ScrollMagic scene을 생성합니다.
const scene = new ScrollMagic.Scene({
    triggerElement: elementToHide, // 요소가 화면에 나타날 때 애니메이션이 실행됩니다.
    triggerHook: "onEnter", // 화면에 요소가 완전히 들어왔을 때 애니메이션이 실행됩니다.
})
.setTween(hideAnimation) // 생성한 애니메이션을 지정합니다.
.addTo(controller); // controller에 scene을 추가합니다.

위의 코드는 ScrollMagic을 사용하여 페이지 스크롤에 따라 “element-to-hide”라는 ID를 가진 요소를 감추는 예제입니다. 요소가 화면에 나타났을 때 opacity가 0이 되고 display가 “none”으로 변경됩니다.

요소를 보이게 하는 방법

요소를 보이게 하는 방법은 요소를 감추는 방법과 비슷합니다. 다음은 ScrollMagic을 사용하여 페이지 스크롤에 따라 요소를 보이게 하는 예제입니다.

import ScrollMagic from 'scrollmagic';

const controller = new ScrollMagic.Controller();

// 보이게 하고자 하는 요소를 선택합니다.
const elementToShow = document.getElementById('element-to-show');

// 요소를 보이게 하는 애니메이션을 생성합니다.
const showAnimation = new TimelineMax()
    .from(elementToShow, 0.5, {opacity: 0, display: "none"});

// ScrollMagic scene을 생성합니다.
const scene = new ScrollMagic.Scene({
    triggerElement: elementToShow, // 요소가 화면에 나타날 때 애니메이션이 실행됩니다.
    triggerHook: "onEnter", // 화면에 요소가 완전히 들어왔을 때 애니메이션이 실행됩니다.
})
.setTween(showAnimation) // 생성한 애니메이션을 지정합니다.
.addTo(controller); // controller에 scene을 추가합니다.

위의 코드는 ScrollMagic을 사용하여 페이지 스크롤에 따라 “element-to-show”라는 ID를 가진 요소를 보이게 하는 예제입니다. 요소가 화면에 나타나면 opacity가 0에서 1로 변경되고 display가 “none”에서 “block”으로 변경됩니다.

결론

이번 포스트에서는 ScrollMagic을 사용하여 페이지 스크롤에 따라 요소를 감추거나 보이게하는 방법을 알아보았습니다. ScrollMagic은 강력한 기능을 제공하며 다양한 페이지 스크롤 애니메이션을 구현하는 데 도움이 됩니다. 보다 자세한 정보는 ScrollMagic 공식 문서를 참조하시기 바랍니다.

ScrollMagic 공식 문서: https://scrollmagic.io/