Parallax Effect06 - 텍스트 효과

//글씨 쪼개기
//let text = document.querySelector("#section1 .content__item__desc");
//let splitText = text.innerText;
//let splitWrap = splitText.split('').join("</span><span>");
//    splitWrap = "<span>" + splitWrap + "</span>"
//    text.innerHTML = splitWrap
//alert(splitWrap)

// 여러개 글씨 쪼개기
//for(let i=1; i<=9; i++){
//    let text = document.querySelector(`#section${i} .content__item__desc`);
//    let splitText = text.innerText;
//    let splitWrap = splitText.split('').join("</span><span aria-hidden ='true'>");
//        splitWrap = "<span aria-hidden ='true'>" + splitWrap + "</span>"
//        text.innerHTML = splitWrap
//}

document.querySelectorAll(".content__item__desc").forEach(desc => {
    let splitText = desc.innerText;
    let splitWrap = splitText.split('').join("</span><span aria-hidden ='true'>");
        splitWrap = "<span aria-hidden ='true'>" + splitWrap + "</span>"
        desc.innerHTML = splitWrap
        desc.setAttribute("aria-label", splitText);
})

function scroll(){
    let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop;
    document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);

    //document.querySelectorAll(".content__item").forEach(item => {
    //    if(scrollTop >= item.offsetTop){
    //        item.querySelector(".content__item__desc").classList.add("show");
    //    }
    //})

    document.querySelectorAll(".content__item").forEach(item => {
        if(scrollTop > item.offsetTop){
            item.querySelectorAll(".content__item__desc span").forEach((span, index) => {
                setTimeout(() => {
                    span.classList.add("show");
                }, 50 * (index+1))
            })
        }
    })
    requestAnimationFrame(scroll);
}
scroll();

• String.prototype.split()
• Array.prototype.join()
• Window.pageYOffset
• Element.scrollTop
• Window.scrollY
• Document.querySelectorAll()
• Math.round()
• setTimeout()