텍스트 웨이브 등장 애니메이션 구현하기(Wave Text Reveal Animation using HTML, CSS, JavaScript)

 

 

이번 포스팅에서는 텍스트가 부드럽게 순차적으로 등장하는 웨이브 애니메이션을 만들 것입니다.

시작해볼까요?

 

 

 

 

HTML은 간단하게

<h2 class="title wave">
  Reveal Animation
</h2>

 

 

 

 

CSS 스타일링을 작성해요

우선 wave 요소에 overflow를 hidden으로 주어서 넘치는 부분이 잘리도록 만듭니다.

.wave {
  word-spacing: 2px;
  overflow: hidden;
}

 

 

@keyframes 키워드를 사용해 reveal 애니메이션을 정의합니다.

 

텍스트가 아래에서 위로 시작되도록

0% 단계에서 translateY를 100%로 지정합니다.

그리고 100% 단계에서 값을 0으로 변경하여 원래 위치로 돌려놓습니다.

@keyframes reveal {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

 

 

이 reveal 애니메이션은 어디에 적용될까요?

바로 letter 요소입니다.

 

자바스크립트로 letter 요소를 동적으로 생성해서 글자 하나하나를 span이 감싸도록 만들 거예요.

그래야 글자가 순차적으로 올라오는 웨이브 효과를 구현할 수 있습니다.

 

원하는 모습은 아래와 같습니다.

<h2 class="title wave">
    <span style="animation-delay:0ms" class="letter">R</span>
    <span style="animation-delay:75ms" class="letter">e</span>
    <span style="animation-delay:90ms" class="letter">v</span>
    <span style="animation-delay:105ms" class="letter">e</span>
    <span style="animation-delay:120ms" class="letter">a</span>
    <span style="animation-delay:135ms" class="letter">l</span>
</h2>

 

 

letter 요소에 정의해둔 reveal 애니메이션을 적용합니다.

지속 시간은 1s, forwards로 설정하여 한번만 실행되게 만듭니다.

 

이때 cubic-bezier를 사용해서 전환 효과를 줄 것입니다.

.letter {
  display: inline-block;
  transform: translateY(100%);
  animation: reveal 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

 

 

easing 효과를 쉽게 만들어주는 사이트를 참고해보세요.

저는 easeInOutQuart 효과를 선택했어요.

 

Ceaser - CSS Easing Animation Tool - Matthew Lein

 

 

 

 

이제 자바스크립트 코드를 작성해봐요

wave 요소의 innerHTML을 수정해서 <span>을 동적으로 생성해서 추가해줄 것입니다.

const wave = document.querySelector(".wave");

wave.innerHTML = ...

 

 

 

우선 textContent로 wave의 텍스트를 가져옵니다.

그리고 split 메서드로 글자를 하나하나 분할합니다.

wave.textContent.split("")

 

 

그 다음 map 메서드를 사용해 각 글자를 돌면서

띄어쓰기가 있다면 공백을 리턴하고, 글자를 <span> 요소로 감싸줍니다.

.map((letter, idx) => {
      if (letter === " ") return " ";
      return `<span style="animation-delay:${
        idx * 15
      }ms" class="letter">${letter}</span>`;
    })

 

 

이때 인덱스(idx)에 따라 15를 곱한 값으로 애니메이션 지연 시간을 조정하고, 인라인 스타일을 정의합니다.

마지막으로 join 메서드로 문자 배열을 다시 문자열로 결합합니다.

const wave = document.querySelector(".wave");

wave.innerHTML = wave.textContent
  .split("")
  .map((letter, idx) => {
    if (letter === " ") return " ";
    return `<span style="animation-delay:${
      idx * 15
    }ms" class="letter">${letter}</span>`;
  })
  .join("");

 

 

결과적으로 각 문자가 요소로 감싸지고, 각 요소에 animation-delay가 적용됩니다. 

 

 

 

 

✨ 완성된 코드를 확인하세요

See the Pen Text Wave Reveal Animation by cona-tus (@cona-tus) on CodePen.