Parallax Effect - 이질감 효과

 

설명

현재 스크롤값에 움직임에 따라서 섹션을 이동할때 섹션에 있는 텍스트와 그림이 같이 움직입니다.

먼저 현재의 스크롤 값을 구한 뒤 현재의 스크롤 값에 따라 각 섹션의 이미지와 텍스트에 부드럽게 움직이는 애니메이션을 넣어줍니다.

function scroll(){
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY;
    document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);

    document.querySelectorAll(".content__item").forEach(item => {
        let offset1 = (scrollTop - item.offsetTop) * 0.1
        let offset2 = (scrollTop - item.offsetTop) * 0.2;

        const target1 = item.querySelector(".content__item__img");
        const target2 = item.querySelector(".content__item__desc");
        const target3 = item.querySelector(".content__item__num");
        
        gsap.to(target1, {duration: 0.3, y: offset1, ease: "power1.out"});
        gsap.to(target2, {duration: 0.3, y: offset2, ease: "power1.out"});
    })

    requestAnimationFrame(scroll)
}
scroll();