GSAP를 사용한 ScrollTrigger로 파랄랙스 효과와 스냅 스크롤링 구현하기

parallax Part3

오늘 배워볼 것은 Parallax인데요 웹 디자인에서 Parallax 효과는 사용자 경험을 향상시키는 강력한 기능 중 하나입니다. 이걸 GSAP의 ScrollTrigger를 이용하여 구현할 수 있습니다. 또한 스냅 스크롤링을 추가하여 사용자가 페이지를 스크롤할 때 부드럽고 정확한 이동을 제공할 수 있습니다.

먼저 섹션과 클래스 네임을 넣어줍니다.

<section id="section1" class="parallax__item">
    <span class="parallax__item__num">01</span>
    <div class="parallax__item__img"></div>
    <h2 class="parallax__item__title">section1</h2>
</section>
// section1
<section id="section2" class="parallax__item">
    <span class="parallax__item__num">02</span>
    <div class="parallax__item__img"></div>
    <h2 class="parallax__item__title">section2</h2>
</section>
// section2
<section id="section3" class="parallax__item">
    <span class="parallax__item__num">03</span>
    <div class="parallax__item__img"></div>
    <h2 class="parallax__item__title">section3</h2>
</section>
// section3
<section id="section4" class="parallax__item">
    <span class="parallax__item__num">04</span>
    <div class="parallax__item__img"></div>
    <h2 class="parallax__item__title">section4</h2>
</section>
// section4
<section id="section5" class="parallax__item">
    <span class="parallax__item__num">05</span>
    <div class="parallax__item__img"></div>
    <h2 class="parallax__item__title">section5</h2>
</section>
// section5
<section id="section6" class="parallax__item">
    <span class="parallax__item__num">06</span>
    <div class="parallax__item__img"></div>
    <h2 class="parallax__item__title">section6</h2>
</section>
// section6
<section id="section7" class="parallax__item">
    <span class="parallax__item__num">07</span>
    <div class="parallax__item__img"></div>
    <h2 class="parallax__item__title">section7</h2>
</section>
// section7
<section id="section8" class="parallax__item">
    <span class="parallax__item__num">08</span>
    <div class="parallax__item__img"></div>
    <h2 class="parallax__item__title">section8</h2>
</section>
// section8
<section id="section9" class="parallax__item">
    <span class="parallax__item__num">09</span>
    <div class="parallax__item__img"></div>
    <h2 class="parallax__item__title">section9</h2>
</section>
// section9

색션 id와 클래스 Name을 정해 주셨으면 이제 스크립트를 만들어주시고

밑에 보이는 코드를 하나씩 입력해봅니다

// ScrollTrigger와 GSAP의 toArray를 사용하여 요소 선택
let panels = gsap.utils.toArray(".parallax__item");

// 각 패널의 시작 위치를 배열에 저장
let tops = panels.map(panel => ScrollTrigger.create({ trigger: panel, start: "top top" }));

// 각 패널에 ScrollTrigger를 적용하여 스크롤시 고정
panels.forEach((panel, i) => {
    ScrollTrigger.create({
        trigger: panel,
        // 시작 위치 조정
        start: () => panel.offsetHeight < window.innerHeight ? "top top" : "bottom bottom",
        pin: true,
        pinSpacing: false
    });
});

// 스냅 스크롤링 설정
ScrollTrigger.create({
    snap: {
        // 스냅 지점 계산
        snapTo: (progress, self) => {
            let panelStarts = tops.map(st => st.start),
                snapScroll = gsap.utils.snap(panelStarts, self.scroll());
            return gsap.utils.normalize(0, ScrollTrigger.maxScroll(window), snapScroll);
        },
        // 스냅 애니메이션 지속 시간
        duration: 0.5
    }
});

위 코드에서는 먼저 .parallax__item 클래스를 가진 요소들을 선택하여 패널로 저장합니다. 각 패널의 시작 위치를 배열에 저장한 후, ScrollTrigger를 사용하여 각 패널을 고정합니다. 마지막으로, 스냅 스크롤링을 설정하여 페이지를 부드럽게 스크롤할 수 있도록 합니다.

이렇게 GSAP의 ScrollTrigger를 사용하여 Parallax 효과와 스냅 스크롤링을 구현할 수 있습니다.