[javascript] ScrollMagic을 사용하여 웹 페이지에 패럴럭스 효과 추가하기

27 Nov 2023

javascript

패럴럭스 효과는 웹 페이지에서 스크롤에 따라 배경이나 요소가 움직이는 효과를 적용하는 것을 말합니다. 이는 웹 페이지에 다양한 시각적 효과를 추가하여 사용자 경험을 향상시킬 수 있는 강력한 방법 중 하나입니다. 이번 포스트에서는 ScrollMagic 라이브러리를 사용하여 패럴럭스 효과를 쉽게 추가하는 방법에 대해 알아보겠습니다.

ScrollMagic 소개

ScrollMagic은 스크롤 이벤트를 트리거로 사용자가 정의한 애니메이션을 실행하는 플러그인입니다. 이를 통해 웹 페이지의 스크롤 위치에 따라 요소들을 관리하고 애니메이션을 적용할 수 있습니다. ScrollMagic은 jQuery를 기반으로 작성되어 있으며, GSAP(GreenSock Animation Platform)과 함께 사용될 때 가장 효과적으로 동작합니다.

ScrollMagic 설치

먼저 ScrollMagic을 사용하기 위해 필요한 파일들을 다운로드하고 웹 페이지에 추가해야 합니다. ScrollMagic의 최신 버전을 공식 사이트에서 다운로드할 수 있습니다. 또한, GSAP의 TweenMax 라이브러리도 함께 설치해야합니다.

다운로드한 파일들을 알맞은 위치에 추가한 후, HTML 파일에서 다음과 같이 스크립트들을 불러옵니다.

<link rel="stylesheet" href="scrollmagic.css">
<script src="jquery.min.js"></script>
<script src="TweenMax.min.js"></script>
<script src="ScrollMagic.min.js"></script>

ScrollMagic을 사용하기 위해 jQuery와 GSAP의 TweenMax도 함께 로드되어야 합니다.

ScrollMagic 사용하기

ScrollMagic을 성공적으로 설치했다면, 이제 패럴럭스 효과를 웹 페이지에 추가할 준비가 되었습니다. 먼저, ScrollMagic 컨트롤러를 초기화해야 합니다. 다음과 같은 코드를 추가해주세요.

var controller = new ScrollMagic.Controller();

패럴럭스 효과를 적용하고자 하는 요소를 선택합니다. 예를 들어, 다음과 같이 클래스 이름이 “parallax”인 요소를 선택합니다.

var parallaxElement = document.querySelector(".parallax");

ScrollMagic을 사용하여 해당 요소에 애니메이션을 적용해보겠습니다. 다음과 같은 코드를 추가해주세요.

var parallaxScene = new ScrollMagic.Scene({
    triggerElement: parallaxElement,
    triggerHook: 1,
    duration: "100%"
})
.setTween(TweenMax.from(parallaxElement, 1, { y: "-50%", ease: Linear.easeNone }))
.addTo(controller);

위 코드에서, triggerElement는 패럴럭스 효과를 적용하고자 하는 요소를, triggerHook은 요소가 스크롤에 반응하는 위치를 나타냅니다. duration은 요소가 애니메이션 동안 얼마나 움직이는지 설정합니다. setTween 메서드를 사용하여 요소에 적용될 애니메이션을 정의할 수 있습니다. 위 코드에서는 요소의 y 위치를 “-50%”로 1초 동안 이동시키는 애니메이션을 설정했습니다.

이제 웹 페이지를 스크롤해보면, 패럴럭스 효과가 적용된 요소가 스크롤에 따라 움직이는 것을 확인할 수 있습니다.

정리하자면, ScrollMagic을 사용하면 웹 페이지에 패럴럭스 효과를 추가하는 것이 매우 간단해집니다. ScrollMagic 컨트롤러를 초기화하고, 효과를 적용하고자 하는 요소와 애니메이션을 설정해주면 됩니다. ScrollMagic 라이브러리의 다양한 기능들을 활용하여 웹 페이지에 독특하고 멋진 패럴럭스 효과를 추가해보세요!

ScrollMagic 소개

ScrollMagic 설치

ScrollMagic 사용하기

참고 자료