JavaScript テキストアニメーション備忘録

はじめに

JavaScriptでテキストアニメーションを実装してみたので、忘れないようにメモ程度に残しておきます。
CSSに関しては書かないので、JavaScriptのみの紹介になります。
かなりわかりにくいと思いますが、個人のメモ程度なのでご了承ください。
何度も投稿を続けて、わかりやすい記事が書けるように頑張ります。

JavaScriptコード説明

HTMLコード

<h1 class='title'>ABC</h1>

JavaScriptコード

document.addEventListener("DOMContentLoaded", function () {
  const el = document.querySelector(".title");

  const str = el.innerHTML.trim().split("");

  el.innerHTML = str.reduce((acc, curr) => {
    curr = curr.replace(/\s+/, " ");

    return `${acc}<span class="char">${curr}</span>`;
  }, "");
});

• 一行目でDOMがロードされた時にイベントが発火するようにする。
• "title"というクラスを持つ要素をelに代入する。
• elに対してinnerHTMLでelのHTML要素を取得し、trim()で全てのスペースを取り除き、split("")で文字列を一文字ずつ分割したものをstrに代入する。
• innerHTMLでelのHTML要素に、先ほど一文字ずつに分割したそれぞれに対して"char"というクラスを付与したspanタグを挿入していく。HTML内の半角スペースを検知した場合、 という特殊文字に変換する。
• accuは累積した結果、currは現在の文字を表す。

以上の流れを簡単に表すと

ABCを取得
→前後のスペースを取り除いた上で"A", "B", "C"に分割
→<h1 class='title'><span class="char">A</span>BC</h1>
→<h1 class='title'><span class="char">A</span><span class="char">B</span>C</h1>
→<h1 class='title'><span class="char">A</span><span class="char">B</span><span class="char">C</span></h1>

あとはCSSでcharクラスが付与された時に働くアニメーションを設定すれば完成