Blog スタッフブログ

文字をランダムな順番で表示

今回は、HTML内の文字（1文字ずつの <span>）をランダムな順番でふわっと表示させるアニメーションの実装方法をご紹介します。

キャッチコピーや目立たせたいコンテンツに動きをつけることが可能です。

サンプルHTML

<div id="random-anime">
  <span>ラ</span>
  <span>ン</span>
  <span>ダ</span>
  <span>ム</span>
  <span>な</span>
  <span>順</span>
  <span>版</span>
  <span>で</span>
  <span>表</span>
  <span>示</span>
</div>

サンプルJS

<script>
document.addEventListener("DOMContentLoaded", () => {
  const container = document.getElementById("random-anime");
  if (!container) return;

  const spans = Array.from(container.querySelectorAll("span"));

  function shuffle(array) {
    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
  }

  const shuffledSpans = shuffle(spans);
  shuffledSpans.forEach((span, i) => {
    span.style.opacity = "0";
    span.style.display = "inline-block";
    span.style.transition = "opacity 0.6s ease, transform 0.6s ease";
    span.style.transform = "translateY(10px)";

    setTimeout(() => {
      span.style.opacity = "1";
      span.style.transform = "translateY(0)";
    }, i * 40); // 50msごとにランダムに実行
  });
});
</script>

戻る 一覧へ戻る