Parallax Effect 06 - 스크롤링 효과 : 텍스트 효과

{
 //글씨 span태그로 한 글자씩 감싸기
        // let text = document.querySelector("#section1 .content__item__desc");
        // let splitText = text.innerText;                      //글씨를 가져옴
        // let splitWrap = splitText.split('').join("</span>") //가져온 글씨를 split()로 한 글자씩 쪼개고 
        //     splitWrap = "<span>" + splitWrap + "</span>"        //span으로 감쌈
        //     text.innerHTML = splitWrap;     //span으로 감싼 글씨를 innerHTML로 가져옴

        //여러개 글씨 쪼개기 (위의 식을 다중(forEach)로 바꿔서 모든 desc가 효과를 받게 바꿈)
            document.querySelectorAll(".content__item__desc").forEach(desc=>{
                let  splitText = desc.innerText;
                let splitWrap = splitText.split('').join("</span><span aria-hidden='true'>"); //웹 표준을 준수하기 위해 hidden을 씀 글자 사이 띄어쓰기를 읽기때문에 hidden으로 숨김
                    splitWrap = "<span aria-hidden='true'>" + splitWrap + "</span>"
                    desc.innerHTML = splitWrap;
                    desc.setAttribute("aria-label", splitText)  //desc한테 속성을 줌(라벨)
            })
        function scroll(){
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY  
            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();
}