Parallax Effect - 이질감 효과

function scroll() { //재귀함수를 이용한 스크롤값 구하기
    let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop;
    document.querySelector(".scrollTop span").innerText = scrollTop;


    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(${offset1}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();

 

페럴럭스 이질감 효과 사이트