テキストをランダムに1文字づつ表示するアニメーション

<p class="text" data-char-span data-text-animation="fadeIn">吾輩は猫である。</p>
<p class="text" data-char-span data-text-animation="fadeIn">名前はまだない。</p>

/* アニメーション前 */
[data-text-animation="fadeIn"] span {
  opacity: 0;
  transition: opacity 1s;
}

/* アニメーション後 */
[data-text-animation="fadeIn"] span.is-active {
  opacity: 1;
}

// テキストアニメーションの一連の処理
const fadeInChars = document.querySelectorAll(
  '[data-text-animation="fadeIn"] span'
); // アニメーション対象の要素をNodeListとして取得
const spansArray = Array.from(fadeInChars); // NodeListを配列に変換

// ランダムに要素を選択してアクティブ化する関数
const addActiveClassRandomly = () => {
  if (spansArray.length === 0) return; // 配列が空の場合は処理を終了

  const randomIndex = Math.floor(Math.random() * spansArray.length); // 0から配列の長さ-1までのランダムな整数を生成
  const randomSpan = spansArray[randomIndex]; // ランダムに選択された要素を取得

  randomSpan.classList.add("is-active"); // 選択された要素にis-activeを追加
  spansArray.splice(randomIndex, 1); // 処理済みの要素を配列から削除

  if (spansArray.length > 0) {
    // 配列の要素数が0になるまで
    setTimeout(addActiveClassRandomly, 100); // 100ミリ秒後に再帰的に関数を呼び出し
  }
};

addActiveClassRandomly(); // アニメーション処理の開始

// テキストアニメーションの一連の処理
const fadeInChars = document.querySelectorAll('[data-text-animation="fadeIn"] span');
const spansArray = Array.from(fadeInChars);

const randomIndex = Math.floor(Math.random() * spansArray.length);

if (spansArray.length > 0) {
  setTimeout(addActiveClassRandomly, 100);
}