Script effect/Parallax effect

Javascript Parallax Effect05 - 이질감 효과

개발자가되고싶은자 2022. 3. 8. 14:17

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

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

                const target = item.querySelector(".content__item__img")
                const target2 = item.querySelector(".content__item__desc")
                const target3 = item.querySelector(".content__item__num")

                gsap.to(target, {
                    duration: .3,
                    y: offset,
                    ease: "power2.out"
                });
                gsap.to(target2, {
                    duration: .6,
                    y: offset2,
                    ease: "power2.out"
                });
            })
            requestAnimationFrame(scroll);
        }
        scroll();     

https://jowuseop1110.github.io/webs_class/javascript/effect/parallaxEffect05.html