티스토리 뷰
{
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
}
'Script Sample > ParallaxEffect' 카테고리의 다른 글
Parallax Effect 06 - 스크롤링 효과 : 텍스트 효과 (0) | 2022.03.08 |
---|---|
Parallax Effect 05 - 스크롤링 효과 : 이질감 효과 (0) | 2022.03.08 |
Parallax Effect 04 - 스크롤링 효과 : 나타나기 (0) | 2022.03.08 |
Parallax Effect 03 - 스크롤링 효과 : 숨김 메뉴 (0) | 2022.03.08 |
Parallax Effect 02 - 스크롤링 효과 : 사이드 메뉴 (0) | 2022.03.08 |
댓글
© 2018 webstoryboy