Notice
Recent Posts
Recent Comments
Link
초짜코딩의 잡동사니
parallaxEffect07 - 리빌 효과 본문
function scroll(){
let scrollTop = window.scrollY || window.pageYOffset || document.documentElement.scrollTop
const reveal = document.querySelectorAll(".reveal");
reveal.forEach(elem => {
let revealOffset = elem.offsetTop + elem.parentElement.offsetTop;
let revealDelay = elem.dataset.delay;
// if(scrollTop>=revealOffset - window.innerHeight/2){
// elem.classList.add("show")
// }
if(scrollTop>=revealOffset - window.innerHeight/2){
if(revealDelay == undefined){
elem.classList.add("show")
}else{
setTimeout(() => {
elem.classList.add("show")
}, revealDelay)
}
}
})
document.querySelector(".scrollTop span").innerText =Math.round(scrollTop);
requestAnimationFrame(scroll);
}
scroll();
'Script Sample > parallax effect' 카테고리의 다른 글
parallaxEffect06 - 텍스트 효과 (0) | 2022.03.11 |
---|---|
parallaxEffect05 - 이질감 효과 (0) | 2022.03.11 |
parallaxEffect04 - 나타나기 (0) | 2022.03.11 |
parallaxEffect03 - 숨긴메뉴 (0) | 2022.03.11 |
parallaxEffect02 - 사이드메뉴 (0) | 2022.03.11 |