Script Sample/ParallaxEffect
Parallax Effect 01 - 스크롤링 효과 : 메뉴이동
근혁
2022. 3. 8. 13:55
{
document.querySelectorAll("#parallax__nav li a").forEach(li=>{
li.addEventListener("click", (e) =>{
e.preventDefault();
document.querySelector(li.getAttribute("href")).scrollIntoView({
behavior:"smooth"
})
})
})
window.addEventListener("scroll", ()=>{
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY;
// forEach
document.querySelectorAll(".content__item").forEach((element, index)=>{
if(scrollTop >= element.offsetTop -2){
document.querySelectorAll("#parallax__nav ul li").forEach(li => {
li.classList.remove("active");
});
document.querySelector("#parallax__nav ul li:nth-child("+(index+1)+")").classList.add("active")
}
})
// info
document.querySelector(".scrollTop span").innerText = Math.round(scrollTop); //스크롤이 내려간 값을 화면에 출력
document.querySelector(".offset1").innerText = document.getElementById("section1").offsetTop
document.querySelector(".offset2").innerText = document.getElementById("section2").offsetTop
document.querySelector(".offset3").innerText = document.getElementById("section3").offsetTop
document.querySelector(".offset4").innerText = document.getElementById("section4").offsetTop
document.querySelector(".offset5").innerText = document.getElementById("section5").offsetTop
document.querySelector(".offset6").innerText = document.getElementById("section6").offsetTop
document.querySelector(".offset7").innerText = document.getElementById("section7").offsetTop
document.querySelector(".offset8").innerText = document.getElementById("section8").offsetTop
document.querySelector(".offset9").innerText = document.getElementById("section9").offsetTop
}