이펙트 응용편 - 페럴럭스 오번째

페럴럭스 이펙트5

이번 페럴럭스 이펙트는 이질감 효과를 나타냈습니다.

원본 소스 보기 원본 사이트 보기

---

js 코드 설명

이질감을위해 offset1 변수를 만들어 현제 보이는 스크롤 탑 값과 각 요소의 offsetTop 값을 뺀 오차만큼
translateY 를 주어서 스크롤이 내려갈때마다 살짝 움직이는 이질감 효과를 만들었습니다.
조금더 자연스러운 효과를위해 gsap를 사용하여 훨씬 자연스럽게 했습니다.

function scroll() {
   let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
   document.querySelector("#parallax__info span").innerText = Math.ceil(scrollTop);
    
   document.querySelectorAll(".content__item").forEach((item) => {
       const target1 = item.querySelector(".content__item__img");
       const target2 = item.querySelector(".content__item__desc");
       const target3 = item.querySelector(".content__item__num");

       let offset1 = (scrollTop - item.offsetTop) * 0.1;
       let offset2 = (scrollTop - item.offsetTop) * 0.05;

       // target1.style.transform = `translateY(${offset1}px)`;
       // target2.style.transform = `translateY(${offset2}px)`;
       // target3.style.transform = `translateY(${offset1}px)`;
       
       gsap.to(target1, { duration: 0.3, y: offset1, ease: "power4.out" });
       gsap.to(target2, { duration: 0.2, y: offset2 });
       gsap.to(target3, { duration: 0.2, y: offset2, ease: "expo.out" });
   });
   requestAnimationFrame(scroll);

scroll();