패럴랙스 이펙트05. : 이질감 효과

 //requestAnimationFrame()을 이용한 보다 효율적인 코딩.
        function scroll(){
            let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop;
            document.querySelector(".srcollTop").innerText = Math.round(scrollTop);
            
            // const img = document.querySelector("#section01 .content__item__img");
            // img.style.transform = "translateY("+scrollTop/10+"px)";
            document.querySelectorAll(".content__item").forEach(item =>{
                //움직이는 스크롤 기준점을 현재 기준점으로 지정해준 뒤, 0.1정도를 곱해서 이미지가 움직이는 크기영역을 지정.
                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를 이용해서 더 부드럽게 움직이게.
                gsap.to(target1,{duration: 0.3, translateY : offset1, ease: "power1.out"});
                gsap.to(target2,{duration: 0.3, translateY : offset2, ease: "power1.out"});
                
               
            })
            
            requestAnimationFrame(scroll)   //재귀함수의 예 (자기자신을 호출)
        }
        scroll();


 

 

 

이번 예제는 스크롤을 내리면 이미지에 이질감 효과를 주는 예제입니다.

움직일 영역을 CSS로 작업 후  움직이는 스크롤 기준점을 통해서 스크립트를 작업해줍니다.

움직이는 스크롤 기준점을 현재 기준점으로 지정해준 뒤, 0.1 정도를 곱해서 이미지가 움직이는 크기 영역을 지정해줍니다.

 

움직이는 스크립트는 gsap 플러그인을 이용해서 보다 부드럽게 작업해줍니다.