패럴랙스 이펙트06. : 텍스트 효과

 //글씨 쪼개기 
        // let text = document.querySelector("#section01 .content__item__desc");
        // let splitText = text.innerText;
        // let splitWrap = splitText.split('').join("</span><span>");
        //     splitWrap = "<span>" + 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);
        });

        //requestAnimationFrame()을 이용한 보다 효율적인 코딩.
        function scroll(){
            let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop;
            document.querySelector(".srcollTop").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 함수를 이용해서 인덱스+1 값만큼 반복 실행. 0.05초 마다. 
                        setTimeout(()=>{
                            span.classList.add("show");
                        }, 50 * (index+1))                        
                    })
                }
            })
            
            
            requestAnimationFrame(scroll)   //재귀함수의 예 (자기자신을 호출)
        }
        scroll();


 

 

이번 예제는 스크롤을 내리면 텍스트가 하나씩 쪼개져서 출력되는 이펙트 예제입니다. 

텍스트가 한번에 나타나는것이 아닌 순차적으로 나타내게 하기위해서 setTimeout 함수를 이용해서 작업합니다. 

글자의 전체 갯수(index+1) 만큼 반복 실행하며, 그 주기는 0.05초 입니다. 

글씨를 우선 쪼개 주기 위해서 각각의 문자마다 span 태그를 입혀주는 작업을 합니다. 

이 과정에서 웹 표준을 고려하기 위해서 aria-hidden을 사용합니다.