parallax Effect06

parallaxEffect06

패럴랙스 이펙트06 - 텍스트 효과

---

원본 소스 보기 원본 사이트 보기

JAVASCRIPT

split(), join() 메서드를 사용하여 각 content__item의 명언을 각 한글자씩 span태그로 쪼개(?)줍니다.
(aria-hidden : true를 주어 불필요한 스크린 리더와 같은 보조기술 사용자의 콘텐츠 탐색을 제한합니다.)
(span태그로 인해 쪼개(?)진 span태그를 한 글자씩 인식하는 것을 방지하기 위해 text.setAttribute("aria-label", splitText) 사용)
scroll()함수를 사용하여 scrollTop값을 저장 후 출력, index값을 통해 한 글자씩 CSS의 애니메이션 효과로 출력되도록합니다.

// 글씨 쪼개(?)기(다중이)
document.querySelectorAll(".split").forEach((text) => {
    let splitText = text.innerText;
    let splitWrap = splitText.split("").join("</span><span aria-hidden='true'>");
    splitWrap = "<span aria-hidden='true'>" + splitWrap + "</span>";
    text.innerHTML = splitWrap;
    text.setAttribute("aria-label", splitText);
});

function scroll() {
    let scrollTop = window.scrollY;
    document.querySelector("#parallax__info .scroll span").innerText = Math.round(scrollTop);

    document.querySelectorAll(".content__item").forEach((item) => {
        if (scrollTop >= item.offsetTop) {
            item.querySelectorAll(".split span").forEach((span, i) => {
                span.classList.add("show");

                span.style.transition = i + "00ms";

                // item.querySelectorAll(".split span.show").forEach((el, i) => {
                //     el.classList.add(`:nth-child${i}`);
                //     el.style.transition = i + "00ms";
                // });
            });
        }
    });
    requestAnimationFrame(scroll);

    // 첫 번째 span --> 0.01s --> (i)  10ms
    // 두 번째 span --> 0.02s          20ms
    // 세 번째 span --> 0.03s          30ms
}
scroll();