Parallax Effect05 - 이질감 효과

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

    // const img = document.querySelector("#section1 .content__item__img")
    // img.style.transform = "translateY("+scrollTop/10+"px)"

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

        const target1 = item.querySelector(".content__item__img");
        const target2 = item.querySelector(".content__item__desc");
        const target3 = item.querySelector(".content__item__num");
        
        // target1.style.transform = `translateY(${translateY}px)`;
        // target2.style.transform = `translateY(${offset2}px)`;
        // target3.style.transform = `translateY(${-offset2}px)`;

        gsap.to(target1,{duration: .3, y: offset1, ease: "power1.out"});
        gsap.to(target2,{duration: .3, y: offset2, ease: "power1.out"});
    })

    requestAnimationFrame(scroll)
}
scroll();

 

패럴랙스 효과