스플릿 텍스트 리빌

Split text reveal

문장을 글자·단어 단위로 쪼갠 뒤 각각을 개별 요소로 만들어 스태거로 하나씩 등장시키는 기법. SplitType, GSAP SplitText 같은 라이브러리가 이 작업을 대신해줍니다.

다른 이름: Text splittingPer-character reveal

···

html

<h1 class="split" id="split" aria-label="REVEAL"></h1>

css

.split{display:flex;font:800 clamp(22px,8vmin,54px)/1 sans-serif;color:var(--fg);letter-spacing:-.01em}
.split span{display:inline-block;opacity:0;transform:translateY(60%) rotate(6deg);
  animation:up .7s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes up{to{opacity:1;transform:translateY(0) rotate(0)}}

const word = 'REVEAL';
const el = document.getElementById('split');
function run() {
  el.innerHTML = '';
  [...word].forEach((ch, i) => {
    const s = document.createElement('span');
    s.textContent = ch;
    s.setAttribute('aria-hidden', 'true');
    s.style.animationDelay = (i * 70) + 'ms';
    el.appendChild(s);
  });
}
run();
setInterval(run, 2600);

텍스트는 기본적으로 하나의 덩어리라 부분만 애니메이션할 수 없습니다. 그래서 JS로 각 글자(또는 단어)를 <span>으로 감싸고, 그 span들에 스태거 애니메이션을 적용합니다. 줄바꿈이 있는 문단은 "단어" 단위로 쪼개는 게 안전합니다 — 글자 단위로 쪼개면 줄바꿈 계산이 흐트러질 수 있습니다.

접근성을 위해 원본 텍스트는 aria-label로 남겨두고, 쪼개진 span들은 aria-hidden 처리하는 게 안전합니다.

언제 쓰나

히어로 헤드라인처럼 한 번만 강조하고 싶은 텍스트에 씁니다. 본문 문단에 쓰면 읽기를 방해합니다.