Parallax Effect07 - 리빌 효과

//만약에 reveal 클래스가 있는데
//글씨를 span으로 감싸주고
//글씨를 다 넣어줘야 함
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 revealOffetset = elem.offsetTop + elem.parentElement.offsetTop;
        let revealDelay = elem.dataset.delay;
        
        // if(scrollTop >= revealOffetset - window.innerHeight/2){
        //     elem.classList.add("show");
        // 

            if(scrollTop >= revealOffetset - window.innerHeight/2){
            if(revealDelay == undefined){ //data가 없으면 show 클래스 그냥 추가.
                    elem.classList.add("show");
            } else {   //data-delay가 있으면 시간차로 show 추가.
                setTimeout(() => {
                    elem.classList.add("show");
                }, revealDelay)   //변수 지정한 data-delay값 (500)
            }
        }    
    })
    
    document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);
    requestAnimationFrame(scroll); //재귀함수의 예 (자기자신을 호출)
}
scroll();

 

패럴랙스 효과