Parallax Effect - 텍스트 효과

 

설명

현재 스크롤값에 따라서 섹션을 이동할때 각 섹션에 있는 텍스트에 애니메이션 효과가 나타납니다.

현재의 스크롤 값에 따라 각 섹션의 offsetTop값에 도달하면 각각의 글자마다 span태그를 이용해 쪼개준 뒤 한글자 한글자씩 애니메이션 효과를 나타납니다.

//여러개 글씨 쪼개기 - 웹표준을 준수하기 위해 쪼개기전 글과 라벨로 묶어줌
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);
})

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.querySelectorAll(".content__item__desc span").forEach((span, index) => {
                setTimeout(() => {
                    span.classList.add("show");
                }, 50 * (index+1))
                
            })
        }
    })

    requestAnimationFrame(scroll)
}
scroll();