초짜코딩의 잡동사니

parallaxEffect07 - 리빌 효과 본문

Script Sample/parallax effect

parallaxEffect07 - 리빌 효과

초짜코딩 2022. 3. 11. 16:15

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();