Parallax Effect06 - 텍스트 효과

//section1 글씨 쪼개기 
// 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;

//여러 section 글씨 쪼개기
document.querySelectorAll(".content__item__desc").forEach(desc => {
    let splitText = desc.innerText;
    let splitWrap = splitText.split('').join("</span><span aria-hidden='ture'>");
        splitWrap = "<span aria-hidden='ture'>" + 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 함수를 이용해서 인덱스+1 값만큼 0.05초 마다 반복 실행 
                setTimeout(() => {
                    span.classList.add("show");
                },50 * index+1)
            })
        }
    })

    requestAnimationFrame(scroll);
}
scroll();

 

패럴랙스 효과