テキストアニメーション 文字分割の際の半角スペースと<br>　【追記あり】

javascript関連
2025年3月18日

gsapを利用したテキストアニメーションで、文字の分割をjavascriptで実行した際の覚書き。
当初はCDNの

<script src="https://unpkg.com/split-type"></script>

で利用していましたが、ある日突然split-typeが読み込まれない状態になって表示が崩れるということがあったのでサーバー設置のjsのほうが安心ということでこの方法にしました。
※いまsplit-typeをCDNで読み込んでみるとちゃんとscriptが読み込めているようです。


単に文字を分割して<span></span>で囲むだけの簡単なjsは調べればすぐに見つかります。ただ、英字の文で半角スペースを反映させたり、改行させたいところでの<br>を反映させたりなど、ちょっとしたカスタマイズが必要なときもあります。
さらに上記に加え、複数のclass要素にそれぞれ別のアニメーションを加えたいという時にも使えるjsを置いておきます。

function textSplitWithSpan(selector) {
  document.querySelectorAll(selector).forEach((element) => {
    const text = element.innerHTML;
    element.innerHTML = "";

    const fragments = text.split(/(<br\s*\/?>)/gi);

    fragments.forEach((fragment) => {
      if (fragment.toLowerCase().includes("<br")) {
        element.appendChild(document.createElement("br"));
      } else {
        fragment.split("").forEach((char) => {
          const span = document.createElement("span");
          span.textContent = char;
          span.style.opacity = "0";
          if (char === " ") {
            span.style.display = "inline";
            span.innerHTML = "&nbsp;";
          } else {
            span.style.display = "inline-block";
          }
          element.appendChild(span);
        });
      }
    });

    animateText(element);

  });
}

unction animateText(element) {
  const spans = element.querySelectorAll("span");

  if (element.classList.contains("sample-1")) {

//gsap.fromTo ここにsample-1のAnimatin処理

} else if (element.classList.contains("sample-2")) {

//gsap.fromTo ここにsample-2のAnimation処理

} else if (element.classList.contains("sample-3")) {

// gsap.fromTo ここにsample-3のAnimation処理

   }
}

textSplitWithSpan(".sample-1, .sample-2, .sample-3");

htmlは以下のようになります。

<h2 class="sample-1">Aaaaa Bbbb Ccccc</h2>
<h2 class="sample-2">文章を入れてここで改行<br>も入れたい</h2>
<h2 class="sample-3">くるくる回りながら出現する文字</h2>

____________________________________________________________

【追記】
上記の作業前に確認しておくこと。
MAMPを複数のデバイスで利用していて、データベース（mysql80など）をNASなどに置いてシンボリックリンクで共有している場合は注意が必要です。というか自分がよくやってしまうので自制のためにも書いときます。
一方のデバイスで利用後にMAMPを終了するのを忘れて、別のデバイスでMAMPを起動して作業をするとコンフリクトを起こしてしまいます。で、サーバーが立ち上がらなくなってMAMPのSTARTボタンがオレンジのままということがあります。
複数人での作業や、複数のデバイスでの作業が必須の場合はDockerなどの共同作業が安全にできる環境に変更しましょう！

PAGE TOP