Parallax Effect 스크롤링 효과 - 이질감 효과

 

	function scroll(){
            //재귀함수를 사용하여 무한반복하여 스크롤값 찾는 방법
            let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop;
            document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);

            // const img = document.querySelector("#section1 .parallax__cont__img")
            // img.style.transform = "translateY("+scrollTop/10 +"px)"

            document.querySelectorAll(".content__item").forEach(item => {
                //스크롤값을 현재스크롤 가운데에 위치하게 해주는 변수
                let offset1 = (scrollTop - item.offsetTop) * 0.1;
                let offset2 = (scrollTop - item.offsetTop) * 0.15;

                const target1 = item.querySelector(".parallax__cont__img");
                const target2 = item.querySelector(".parallax__cont__desc");

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

                //gsap을 이용하여 transform = translateY 방법
                gsap.to(target1, {duration: .3, y: offset1, ease: "power1.out"});
                gsap.to(target2, {duration: .3, y: offset2, ease: "power1.out"}); 
            })

            requestAnimationFrame(scroll)
        }
        scroll();

자바스크립트로 패럴럭스 스크롤링(Parallax Scroll Effect)을 주는 사이트 입니다.

스크롤을 밑으로 내릴때 이미지와 글자가 함께 내려가는 스크립트입니다.

기준점을 제대로 설정 안해주면 스크롤값에 비례하기 때문에 섹션마다 적용되는 스크롤값이 달라집니다.

스크롤 값에 각 이미지의 offsetTop값을 빼주어 기준점을 알맞게 맞춥니다.

 

참조사이트

패럴랙스 효과