06. 패럴랙스 스크롤링 효과 : 텍스트 효과

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

        //여러개 글씨 쪼개기
        document.querySelectorAll(".content__item__desc").forEach(desc => {
            let splitText = desc.innerText;
            let splitWrap = splitText.split('').join("");
            splitWrap = "" + splitWrap + "";
            desc.innerHTML = splitWrap;
            desc.setAttribute("aria-label", splitText);
        });

        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();

패럴랙스06 사이트