Parallax Effect - 텍스트 효과

let text = document.querySelectorAll(".content__item .content__item__desc");
//속성은 get,set, 글씨는 innerTExt로 다 함
//여러개 글씨 쪼개기
text.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 = 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) => {
                // span.classList.add("show");

                // setInterval  --> 여러번 반복
                // setTImeout   --> 한번만

                setTimeout(() => {
                    span.classList.add("show")
                }, 50 * index + 1);
            })
        }
    })

    requestAnimationFrame(scroll);
}
scroll();

 

페럴럭스 텍스트 효과 사이트