티스토리 뷰
document.querySelectorAll("#parallax__nav a").forEach(el => {
el.addEventListener("click", e => {
e.preventDefault();
document.querySelector(el.getAttribute("href")).scrollIntoView({
behavior: "smooth"
})
})
})
window.addEventListener("scroll", () => {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY;
let parallax__nav = document.querySelector("#parallax__nav")
document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);
document.querySelectorAll(".content__item").forEach((el, index) => {
if (scrollTop >= el.offsetTop - 2) {
document.querySelectorAll("#parallax__nav li").forEach(li => {
li.classList.remove("active");
});
document.querySelector("#parallax__nav li:nth-child(" + (index + 1) + ")").classList
.add("active")
}
})
})
let nowScroll = true;
let lastScroll = 0;
function scrollProgress() {
nowScroll = true;
setInterval(() => {
if (nowScroll) {
nowScroll = false;
hasScroll();
}
}, 300);
}
function hasScroll() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY;
if (scrollTop < lastScroll) {
parallax__nav.classList.add("show")
} else {
parallax__nav.classList.remove("show")
}
lastScroll = scrollTop;
console.log("lastScroll :" + lastScroll)
console.log("scrollTop :" + scrollTop)
}
window.addEventListener("scroll", scrollProgress)
}
https://jowuseop1110.github.io/webs_class/javascript/effect/parallaxEffect03.html
'Script effect > Parallax effect' 카테고리의 다른 글
Javascript Parallax Effect06 - 텍스트 효과 (0) | 2022.03.08 |
---|---|
Javascript Parallax Effect05 - 이질감 효과 (0) | 2022.03.08 |
Javascript Parallax Effect04 - 나타나기 (0) | 2022.03.08 |
Javascript Parallax Effect02 - 사이드 메뉴 이동 (0) | 2022.03.08 |
Javascript Parallax Effect01 - 메뉴이동 (0) | 2022.03.08 |
댓글
© 2018 webstoryboy