자바스크립트 패럴랙스 효과 : 텍스트 효과

자바스크립트 : 패럴랙스 효과 : 텍스트 효과

자바스크립트의 다양한 효과들 중, 패럴랙스 효과입니다. 이번에는 스크롤을 내릴 때마다 해당하는 섹션의 텍스트가 한 글자씩 나타나도록 작업해 보겠습니다.

---

1. 글씨 쪼개기

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;

    // p 태그(split)에 label 속성 추가
    text.setAttribute("aria-label", splitText);
});

글자가 하나씩 나타나도록 하려면, 모든 글자가 한 글자씩 span 태그에 담겨 있어야 합니다. 9개의 섹션 속 글자를 모두 직접 HTML로 쪼갤 수는 없으니, 스크립트로 작업해 줍니다.
split은 각 섹션의 텍스트 박스입니다. 섹션마다 텍스트 박스는 존재하므로, 총 9개의 split이 존재할 것이기 때문에 querySelectorAll을 사용하여 선택해 줍니다. splitText 변수는 각각의 split에 적용한다는 의미입니다. 각각의 split 박스에 split(), join() 메서드를 차례로 사용하는 것입니다.
여기에서는 접근성 향상을 위해, split(p 태그)에 전체 문장을 작성한 aria-label을 추가해 주고, 한 글자씩에 해당하는 각각의 span에 aria-hidden='true'를 추가해 주었습니다.

split() 메서드는 문자열에서 원하는 값을 추출하여 배열로 반환합니다. join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.
"안녕하세요"라는 글자가 있다고 가정했을 때, split('') 메서드를 사용하면 "안","녕","하","세","요"가 됩니다. 그 이후 join("<span></span>") 메서드를 사용하면 "안<span></span>녕<span></span>하<span></span>세<span></span>요"가 됩니다.

2. scroll 이벤트 만들어 주기

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

    requestAnimationFrame(scroll);
}
scroll();

먼저, scroll 이벤트를 만들어 줍니다. scroll 이벤트는 requestAnimationFrame으로 작업해 주는 것이 버벅거림을 최소화할 수 있습니다. scrollTop의 값은 scrollY로 간단하게 구할 수 있습니다. 친절하게 info 박스에도 출력해 줍시다.
애니메이션 효과는 CSS로도, JAVASCRIPT로도 줄 수 있습니다.

2-1) CSS로 효과 주기

document.querySelectorAll(".content__item").forEach((item) => {
    if (scrollTop >= item.offsetTop - 500) {
        item.querySelector(".split").classList.add("show");
    }
});

content__item은 split의 부모 박스입니다. split을 직접 선택하면 모든 텍스트가 동시에 나타나게 되므로, 상위 박스를 선택하고, if문 안에서 split을 선택해 줍시다. 각 섹션에 scroll이 위치했을 때, split에 show 클래스를 추가해 주면 되는 간단한 방법이지만, 아래 소스처럼 CSS로 span에 각각 transition-delay를 지정해 주어야 합니다... 힘듭니다.

노가다의 흔적

.split span {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.3s cubic-bezier(0, 0.71, 0.11, 1.66);
    /* transform은 block 구조만 먹힌다! */
    display: inline-block;
    /* block 구조로 바꾸면 띄어쓰기가 사라지므로, 최소 너비를 지정해주기 */
    min-width: 1vw;
}
.split.show span {
    opacity: 1;
    transform: translateY(0);
}
.split span:nth-child(1) {
    transition-delay: 100ms;
}
.split span:nth-child(2) {
    transition-delay: 150ms;
}
.split span:nth-child(3) {
    transition-delay: 200ms;
}
.split span:nth-child(4) {
    transition-delay: 250ms;
}
.split span:nth-child(5) {
    transition-delay: 300ms;
}
.split span:nth-child(6) {
    transition-delay: 350ms;
}
.split span:nth-child(7) {
    transition-delay: 400ms;
}
.split span:nth-child(8) {
    transition-delay: 450ms;
}
.split span:nth-child(9) {
    transition-delay: 500ms;
}
.split span:nth-child(10) {
    transition-delay: 550ms;
}
.split span:nth-child(11) {
    transition-delay: 600ms;
}
.split span:nth-child(12) {
    transition-delay: 650ms;
}
.split span:nth-child(13) {
    transition-delay: 700ms;
}
.split span:nth-child(14) {
    transition-delay: 750ms;
}
.split span:nth-child(15) {
    transition-delay: 800ms;
}
.split span:nth-child(16) {
    transition-delay: 850ms;
}
.split span:nth-child(17) {
    transition-delay: 900ms;
}
.split span:nth-child(18) {
    transition-delay: 950ms;
}
.split span:nth-child(19) {
    transition-delay: 1000ms;
}
.split span:nth-child(20) {
    transition-delay: 1050ms;
}
.split span:nth-child(21) {
    transition-delay: 1100ms;
}
.split span:nth-child(22) {
    transition-delay: 1150ms;
}
.split span:nth-child(23) {
    transition-delay: 1200ms;
}
.split span:nth-child(24) {
    transition-delay: 1250ms;
}
.split span:nth-child(25) {
    transition-delay: 1300ms;
}
.split span:nth-child(26) {
    transition-delay: 1350ms;
}
.split span:nth-child(27) {
    transition-delay: 1400ms;
}
.split span:nth-child(28) {
    transition-delay: 1450ms;
}
.split span:nth-child(29) {
    transition-delay: 1500ms;
}
.split span:nth-child(30) {
    transition-delay: 1550ms;
}
.split span:nth-child(31) {
    transition-delay: 1600ms;
}
.split span:nth-child(32) {
    transition-delay: 1650ms;
}
.split span:nth-child(33) {
    transition-delay: 1700ms;
}
.split span:nth-child(34) {
    transition-delay: 1750ms;
}
.split span:nth-child(35) {
    transition-delay: 1800ms;
}
.split span:nth-child(36) {
    transition-delay: 1850ms;
}
.split span:nth-child(37) {
    transition-delay: 1900ms;
}
.split span:nth-child(38) {
    transition-delay: 1950ms;
}
.split span:nth-child(39) {
    transition-delay: 2000ms;
}
.split span:nth-child(40) {
    transition-delay: 2050ms;
}
.split span:nth-child(41) {
    transition-delay: 2100ms;
}
.split span:nth-child(42) {
    transition-delay: 2150ms;
}
.split span:nth-child(43) {
    transition-delay: 2200ms;
}
.split span:nth-child(44) {
    transition-delay: 2250ms;
}

2-2) JAVASCRIPT로 효과 주기

document.querySelectorAll(".content__item").forEach((item) => {
    if (scrollTop >= item.offsetTop - 500) {
        item.querySelector(".split").classList.add("show");
        item.querySelectorAll(".split span").forEach((span, index) => {
            span.style.transitionDelay = 100 + 50 * index + "ms";
        });
    }
});

이번에는 JAVASCRIPT입니다. forEach를 사용하여 훨씬 더 간단하게 작업할 수 있습니다.
먼저 split에 show 클래스를 추가해 주고, 각각의 span에 forEach문을 사용해 줍니다. transitionDelay의 초기값은 100ms로 지정하고, index를 곱해주어 50ms씩 증가하게 작업해 주면 완성입니다.

---

결과

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