Parallax Effect07 - 리빌 효과

//만약에 reveal 클래스가 있는데
//글씨를 span으로 감싸주고
//글씨를 다 넣어줘요 함

document.querySelectorAll(".content__item__desc").forEach(desc => {
    let descAf = desc.innerHTML;
    //console.log(descAf);
    //console.log(descAf.includes("span"))

    if(descAf.includes("span")){
        desc.innerHTML = descAf
    } else {
        let descBe = "<span>" + descAf + "</span>";
        desc.innerHTML = descBe;
    }
})

//document.querySelectorAll(".content__item__desc").forEach(desc => {
//    let splitText = desc.innerText;
//    let splitWrap = "<span>" + splitText + "</span>";
//        desc.innerHTML = splitWrap;
//})

function scroll(){
    let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop;

    const reveal = document.querySelectorAll(".reveal");

    reveal.forEach(el => {
        let revealOffset = el.offsetTop + el.parentElement.offsetTop;
        let revealDelay = el.dataset.delay;
        // console.log(revealOffset);

        //if(scrollTop >= revealOffset - window.innerHeight/2){
        //    el.classList.add("show")
        //}

        if(scrollTop >= revealOffset - window.innerHeight/2){
            if(revealDelay = undefined){
                el.classList.add("show");
            } else {
                setTimeout(() => {
                    el.classList.add("show");
                }, revealDelay)
            }
        }
    })

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

• Window.pageYOffset
• Element.scrollTop
• Window.scrollY
• Document.querySelectorAll()
• Math.round()
• setTimeout()