TweenMax와 ScrollMagic를 이용한 이미지 시퀀스 js

Kiyun·2023년 11월 26일

CSS html js

js

목록 보기

12/20

이미지 시퀀스 js

ScrollMagic과 GSAP 라이브러리를 사용하여 스크롤 애니메이션을 구현하였습니다.

준비

설치

TweenMax와 ScrollMagic 라이브러리를 CDN으로 설치합니다.
Tween을 ScrollMagic으로 제어하기 위해 animation.gsap 플러그인도 함께 설치합니다.

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

그리고 디버깅용 플러그인을 설치합니다. 애니메이션의 시작과 끝 지점을 화면에 표시해 주기 때문에 작업할 때 매우 편리합니다!

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>

시퀀스 이미지
라이브러리 설치가 완료되었으면 필요한 것은 컨트롤할 이미지
파일 이름은 craftx 입니다.
craft0.webp 에서 스크롤을 내리면 craft247.webp까지 숫자가 올라가고, 스크롤을 올리면 숫자가 247에서 0으로 작아집니다.

HTML

<div id="Craft" class="Craft">
    <img class="craft" src="./assets/images/craft0.webp" alt="polaroidback">
</div>

Javascript

// 크래프트 이미지 파일 경로를 저장할 배열을 생성합니다.
const craftImgSqc = new Array();

// 이미지 파일 경로를 배열에 저장합니다.
for (let i = 0; i < 248; i++) {
    craftImgSqc.push(`./assets/images/craft${i}.webp`);
}

image preload

이미지 로딩이 느리면 프레임이 뚝뚝 끊기는 것처럼 보일 수 있으니 이미지를 미리 불러옵니다.

// 이미지를 사전에 로드하기 위한 함수를 정의합니다.
function preloading(craftpreImgs) {
    let craftimgTotal = craftpreImgs.length;

    // 각 이미지 경로에 대해 Image 객체를 생성하여 이미지를 로드합니다.
    for (let i = 0; i < craftimgTotal; i++) {
        let craftimg = new Image();
        craftimg.src = craftpreImgs[i];
    }
}

// 배열에 담긴 크래프트 이미지들을 미리 로드합니다.
preloading(craftImgSqc);

애니메이션 오브젝트 생성

TweenMax.to( target:Object, duration:Number, vars:Object ) 문법에 따라 애니메이션 오브젝트를 생성

// 현재 이미지 인덱스를 저장할 객체를 생성합니다.
const craftimg = { craftcrntImg: 0 },
    // 'craft' 클래스를 가진 HTML 엘리먼트를 선택하여 이미지를 표시합니다.
    craftimgTag = document.querySelector('.craft');

// TweenMax를 사용하여 이미지 간 부드러운 전환을 담당하는 애니메이션을 생성합니다.
let $tween_craft = TweenMax.to(craftimg, 1, {
    craftcrntImg: craftImgSqc.length - 1,
    roundProps: 'craftcrntImg',
    immediateRender: true,
    // Tween 업데이트 시마다 실행되는 콜백 함수입니다.
    onUpdate: function () {
        // craftimgTag의 'src' 속성을 현재 이미지의 경로로 설정합니다.
        craftimgTag.setAttribute('src', craftImgSqc[craftimg.craftcrntImg]);

        // translateY 변환을 적용하여 파랄랙스 효과를 만듭니다.
        //저의 경우는 Y축으로 올리기 위해 설정하였습니다.
        const offsetY = "23%";
        craftimgTag.style.transform = `translateY(-${offsetY})`;
    }
});

Controller 생성

// ScrollMagic 컨트롤러를 생성합니다.
const craftcontroller = new ScrollMagic.Controller();

Scene 생성

만들어 둔 애니메이션 오브젝트를 Scene에 추가 후 스크롤 이동시 고정될 영역과 Scene이 시작될 트리거를 삽입

// 크래프트 애니메이션을 위한 ScrollMagic 씬을 생성합니다.
new ScrollMagic.Scene({
    duration: 2100, // 씬의 지속 시간
    triggerElement: '#Craft', // 씬을 트리거하는 엘리먼트
    triggerHook: 0 // 트리거 지점, 0은 뷰포트의 맨 위를 의미합니다.
})
    .setTween($tween_craft) // TweenMax 애니메이션을 설정합니다.
    .setPin('.Craft') // 씬 동안 지정된 엘리먼트를 고정합니다.
    .addTo(craftcontroller); // 씬을 컨트롤러에 추가합니다.

addIndicators()를 추가해서 어떤 지점에서 애니메이션이 시작되는지 확인할 수 있습니다. 애니메이션은 start 지점이 trigger를 지나는 순간 실행됩니다.