parallaxEffect05 - 이질감 효과

window.addEventListener("scroll", () =>{
    let scrollTop = window.scrollY || 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")

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

    //    target1.style.transform = `translateY(${offset1}px)`;
    //    target2.style.transform = `translateY(${offset2}px)`;
    //    target3.style.transform = `translateY(${-offset2}px)`;
    })
    requestAnimationFrame(scroll);
})
scroll();