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