티스토리 뷰
{
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){ //lastScroll이 scrollTop보다 클때 show를 추가하고 아니면 show를 삭제
document.querySelector("#parallax__nav").classList.add("show")
}else {
document.querySelector("#parallax__nav").classList.remove("show")
}
lastScroll = scrollTop;
}
window.addEventListener("scroll", scrollProgress)
document.querySelectorAll("#parallax__nav a").forEach(el => {
el.addEventListener("click", e =>{
e.preventDefault();
document.querySelector(el.getAttribute("href")).scrollIntoView({behavior: "smooth"})
})
})
}
'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 02 - 스크롤링 효과 : 사이드 메뉴 (0) | 2022.03.08 |
Parallax Effect 01 - 스크롤링 효과 : 메뉴이동 (0) | 2022.03.08 |
댓글
© 2018 webstoryboy