05. 패럴랙스 스크롤링 효과 : 이질감 효과

 // window.addEventListener("scroll", () => {
        //     let scrollTop = window.pageYOffset || document.documentElement.scrollTop  ||  window.scrollY; 
        //     document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);
        // });

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

            // if(scrollTop > document.getElementById("section1").offsetTop){
            //     document.getElementById("section1").classList.add("show");
            // }

            // document.querySelectorAll(".content__item")
            // img.style.transform ="tranlateY("+scroll/10+"px)"

            document.querySelectorAll(".content__item").forEach(item =>{
                // let offset = scrollTop - item.offsetTop
                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();

패럴랙스05 사이트