🍧

[JavaScript] 一文字ずつ時間差で表示するアニメーション

に公開
2026/09/24
CSS
HTML
JavaScript
初心者向け
tech

🌱 はじめに

この記事では、Web ページ上でテキストを一文字ずつ表示するアニメーションの実装方法をまとめます。

🌱 結論

JavaScript で指定した要素の文字を一文字ずつ span で囲み、opacity の値を時間差で 0 から 1 に変更することで、一文字ずつ表示するアニメーションを実装しました。

🌱 やり方

1. HTML ファイルの編集

<div>
  <p class="js-text">Welcome to TECHLOG.</p>
</div>

2. CSS ファイルの編集

後述の JavaScript で一文字ずつ span タグで囲うので、span の透明度を 0 にして見えないようにしておきます。

.js-text span {
  opacity: 0;
}

3. JavaScript ファイルの編集

document.addEventListener("DOMContentLoaded", function () {
  // js-textクラスを持つ要素をすべて取得する
  const elements = document.getElementsByClassName("js-text");
  // 取得した要素の数だけ、animateText関数を実行する
  for (let i = 0; i < elements.length; i++) {
    animateText(elements[i]);
  }
});

function animateText(element) {
  // 要素の文字列を取り出し、要素の中身を空にする
  const text = element.textContent;
  element.textContent = "";

  // 一文字ずつspanタグで囲う（for...of を使うと絵文字なども1文字として扱える）
  for (const char of text) {
    const span = document.createElement("span");
    span.textContent = char;
    element.appendChild(span);
  }

  // spanで囲った文字を取得する
  const spans = element.getElementsByTagName("span");
  // 1文字ごとに200ミリ秒ずつ遅らせて、opacityを1にする
  for (let j = 0; j < spans.length; j++) {
    setTimeout(function () {
      spans[j].style.opacity = 1;
    }, j * 200); // 遅延時間を調整
  }
}
GitHubで編集を提案

Discussion