Parallax Effect 05 - 이질감 효과

function scroll(){
    let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop;
    document.querySelector(".scrollTop span").innerText = Math.round(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");
                
        gsap.to(target1, {duration: 0.3, y: offset1, ease: "power1.out"})
        gsap.to(target2, {duration: 0.3, y: offset2, ease: "power1.out"})
    })
    requestAnimationFrame(scroll)
}
scroll();

 

스크롤을 내릴때 이미지와 글자들이 같이 움직이도록 하였습니다.

여기서 기준점을 설정안해주면 내려갈수록 이미지가 안보이게 됩니다.

 

스크롤값에 각 이미지의 offsetTop값을 빼주어서 기준값을 만들어줍니다.

 

전체 사이트 보기