JavaScript : テキストを順番に表示するスクリプト

キャッチコピーなど少ない文字を一文字ずつ表示したい時に使うスクリプトです。
単に順番に表示するだけでなく、下からスッと出現するようなサンプルです。

CSSではアニメーションを設定。

transformでどれくらい下から表示させるかの距離を変更します。

  .catchcopy span {
    opacity: 0;
    display: inline-block;
    transform: translateY(10px); /* 初期の垂直位置 - ここを編集して浮き上がる距離を変更 */
    animation: floatUp 0.5s forwards;
  }

  @keyframes floatUp {
    to {
      opacity: 1;
      transform: translateY(0); /* 最終的な垂直位置 - 通常は変更不要 */
    }
  }

JavaScriptで、テキストの分割とアニメーションの遅延を設定

span.style.animationDelayで順番に表示させるアニメーションの時間を指定しています。

  document.addEventListener('DOMContentLoaded', () => {
    function animateText(element) {
      const text = element.textContent;
      element.textContent = '';

      text.split('').forEach((char, index) => {
        const span = document.createElement('span');
        span.textContent = char;
        span.style.animationDelay = `${index * 0.5}s`; // 各文字のアニメーション遅延を設定
        element.appendChild(span);
      });
    }

    const catchcopyElement = document.querySelector('.catchcopy');
    if (catchcopyElement) {
      animateText(catchcopyElement);
    }
  });

HTML

catchcopyクラスに入れたテキストをアニメーション表示させます。

<p class="catchcopy">あいうえお</p>