Script samlpe/Parallax Effect
04. 패럴랙스 스크롤링 효과 : 나타나기
Gayeong's
2022. 3. 11. 17:29
// window.addEventListener("scroll", () => {
// let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY;
// document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);
// });
function scroll() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY;
document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);
// if(scrollTop > document.getElementById("section1").offsetTop){
// document.getElementById("section1").classList.add("show");
// }
document.querySelectorAll(".content__item").forEach(el => {
if(scrollTop >= el.offsetTop-window.innerHeight/2){ //scrollTop+window.innerHeight/2
el.classList.add("show")
}
});
requestAnimationFrame(scroll);
}
scroll();