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.07
    let offset2 = (scrollTop - item.offsetTop) * 0.3

    let target1 = item.querySelector(".content__item__img")
    let target2 = item.querySelector(".content__item__desc")
    let target3 = item.querySelector(".content__item__num")

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

    gsap.to(target1, {duration: 0.3, y: offset1})
    gsap.to(target2, {duration: 0.3, y: offset2})
    gsap.to(target3, {duration: 0.3, y: -offset2})
})

requestAnimationFrame(scroll);
}
scroll();

• Window.pageYOffset
• Element.scrollTop
• Window.scrollY
• Document.querySelectorAll()
• Math.round()
• gsap