Parallax Effect - 리빌 효과

document.querySelectorAll(".content__item__desc.reveal").forEach((el,i)=>{
    if(!(el.querySelector("span"))){
        const text = el.innerText;
        el.innerHTML = `<span>${text}</span>`;
    }
});
    function scroll() { //재귀함수를 이용한 스크롤값 구하기
    let scrollTop = window.screenY || 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){
            if(revealDelay == undefined){
                elem.classList.add("show");
            } else {
                setTimeout(() => {
                    elem.classList.add("show")
                }, revealDelay);
            }
        }
    });

    document.querySelector(".scrollTop span").innerText = scrollTop;
    requestAnimationFrame(scroll);
    }
scroll();

 

페럴럭스 리빌 효과 사이트