Web BENTO JS
カテゴリ一覧
テキスト演出

13 / TEXT FX 12 パーツ

JSテキストエフェクト 12選

Q: コピーしたテキストエフェクトはそのまま動きますか？

はい。「全部コピー」を押すとHTML・CSS・JSがひとつの自己完結ブロックになってコピーされ、ページに貼り付けるだけで動きます。ライブラリの読み込みは一切不要です。

Q: HTML側で文字を1つずつspanで囲む必要はありますか？

いいえ、必要ありません。初期化スクリプトが読み込み時にテキストを自動で1文字ずつ分割するため、HTMLには素のテキストを書くだけで大丈夫です。あとから文言を変えてもコードの修正は不要です。

Q: 日本語のテキストでも使えますか？

はい。文字分割はJavaScriptが自動で行うため、日本語・英語のどちらでも動きます。ただしホバーで文字シャッフルのようにランダムな英字へ置き換えるタイプは、英字の見出しで使うほうが自然に見えます。

Q: 動きが苦手なユーザーへの配慮はありますか？

はい。すべてのサンプルはOSの「視差効果を減らす」設定（prefers-reduced-motion）を確認し、有効な場合はアニメーションを省略して最終状態のテキストを即座に表示します。

Q: このページのパーツはAIコーディングツールでも使えますか？

はい。Claude CodeやCursorのようにWebページを読めるAIには、このページのURLとパーツ名（例:「1文字ずつ出現」）を伝えるだけで実装を指示できます。AIがWebを読めない場合は、「全部コピー」で取得した自己完結ブロックをチャットに貼り付けて調整を頼むのが確実です。改変後のコードは、公開前に動作確認することをおすすめします。

コピペで動くテキストエフェクト（文字演出）のサンプル集。プレビューは実際にホバーやクリックで再生できます。HTML / CSS / JS タブでコードを確認し、全部コピーを押せば1回の貼り付けで完成。すべて依存ライブラリなしのバニラJSで、data-bnto-* 属性による自動初期化式です。文字の分割はJSが自動で行うので、HTMLには素のテキストを書くだけで大丈夫です。

該当するパーツが見つかりませんでした。

HELLO JAVASCRIPT

スクランブル解読

<!-- 素のテキストを書くだけ。表示時に再生、クリックで何度でも再生 -->
<p class="bnto-scrm" data-bnto-scramble>HELLO JAVASCRIPT</p>

.bnto-scrm {
  --c1: hsl(202 73% 50%);  /* アクセント色 */
  margin: 0; background: #fff; border: 2px solid #DFE9F1;
  border-radius: 14px; padding: 20px 16px; text-align: center;
  /* 等幅フォントだと解読中の幅ガタつきが出ません */
  font-family: Consolas, Menlo, monospace;
  font-weight: 700; font-size: 17px; letter-spacing: .03em;
  color: var(--c1); cursor: pointer; user-select: none;
}

// data-bnto-scramble を自動検出して初期化（複数設置OK・二重実行OK）
(function () {
  var CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#$%&+*';
  document.querySelectorAll('[data-bnto-scramble]').forEach(function (el) {
    if (el.dataset.bntoInit) return;
    el.dataset.bntoInit = '1';
    var text = el.textContent;
    var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    var timer = null;
    function play() {
      // 動きを減らす設定の人には最終状態を即表示
      if (reduce) { el.textContent = text; return; }
      clearInterval(timer);
      var frame = 0;
      timer = setInterval(function () {
        var fixed = Math.floor(frame / 3); // 3コマごとに左から1文字確定
        var out = '';
        for (var i = 0; i < text.length; i++) {
          out += i < fixed ? text[i] : CHARS[Math.floor(Math.random() * CHARS.length)];
        }
        el.textContent = out;
        frame++;
        if (fixed >= text.length) { clearInterval(timer); el.textContent = text; }
      }, 40);
    }
    el.addEventListener('click', play); // クリックで再生
    play();                             // 初期表示時にも1回再生
  });
})();

使い方のコツ

元のテキストは初期化時にJSが記憶するので、HTMLには素のテキストを書くだけで動きます。確定スピードは frame / 3 の3を、コマ送りの速さは 40（ms）を変更してください。ランダム文字が英数字なので、英字の見出しと特に相性がよいです。プレビューをクリック（または↺ボタン）で再生し直せます。

ふわっと1文字ずつ現れます

1文字ずつ出現

<!-- span分割はJSが自動で行うので、素のテキストでOK。クリックで再生し直せます -->
<p class="bnto-charin" data-bnto-charin>ふわっと1文字ずつ現れます</p>

.bnto-charin {
  --c1: hsl(345 80% 55%);  /* アクセント色 */
  margin: 0; background: #fff; border: 2px solid #DFE9F1;
  border-radius: 14px; padding: 20px 16px; text-align: center;
  font-weight: 800; font-size: 15px; color: var(--c1);
  cursor: pointer;  /* クリックで再生し直せる合図 */
}
/* JSが生成する1文字ずつのspan */
.bnto-charin span {
  display: inline-block; opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.bnto-charin.is-in span { opacity: 1; transform: none; }

// テキストを1文字ずつ <span> に分割し、見えたら順にフェードアップ
(function () {
  var io = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-in');
        io.unobserve(entry.target); // 1回だけ再生
      }
    });
  }, { threshold: 0.4 });
  document.querySelectorAll('[data-bnto-charin]').forEach(function (el) {
    if (el.dataset.bntoInit) return;
    el.dataset.bntoInit = '1';
    // 動きを減らす設定なら分割せず、そのまま表示
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    var text = el.textContent;
    el.textContent = '';
    var spans = [];
    Array.prototype.forEach.call(text, function (ch, i) {
      var s = document.createElement('span');
      s.textContent = ch === ' ' ? '\u00A0' : ch; // 半角スペースは潰れ防止
      s.style.transitionDelay = (i * 0.045) + 's'; // 文字ごとに時間差
      el.appendChild(s);
      spans.push(s);
    });
    // クリックで最初から再生し直す
    el.addEventListener('click', function () {
      el.classList.remove('is-in');
      spans.forEach(function (s) { s.style.transition = 'none'; }); // 一瞬で初期状態へ
      void el.offsetWidth; // リフローで状態を確定
      spans.forEach(function (s, i) {
        s.style.transition = '';
        s.style.transitionDelay = (i * 0.045) + 's'; // 時間差を再設定
      });
      el.classList.add('is-in');
    });
    io.observe(el);
  });
})();

使い方のコツ

学習ポイントは「span分割をJSに任せる」ことです。手作業でspanを書くとHTMLが読みにくく文言修正も大変ですが、この方式なら素のテキストを書き換えるだけで済みます。時間差は 0.045（秒/文字）で調整できます。長文に使うと再生が長くなるので、見出し程度の長さがおすすめです。プレビューをクリック（または↺ボタン）で再生し直せます。

WAVE TEXT

波打ちテキスト

<!-- 各文字への delay 付与はJSが自動で行います -->
<p class="bnto-wave" data-bnto-wave>WAVE TEXT</p>

.bnto-wave {
  --c1: hsl(150 58% 42%);  /* アクセント色 */
  --dur: 1.6s;              /* 1往復の時間 */
  margin: 0; background: #fff; border: 2px solid #DFE9F1;
  border-radius: 14px; padding: 20px 16px; text-align: center;
  font-weight: 900; font-size: 19px; letter-spacing: .04em;
  color: var(--c1);
}
.bnto-wave span {
  display: inline-block;
  animation: bnto-wave-up var(--dur) ease-in-out infinite;
}
@keyframes bnto-wave-up {
  0%, 100% { transform: none; }
  30%      { transform: translateY(-7px); }
}
/* 動きを減らす設定の人には静止表示 */
@media (prefers-reduced-motion: reduce) {
  .bnto-wave span { animation: none; }
}

// 各文字を<span>に分割し、animation-delay を自動付与して波打たせる
// ※動きの抑制（prefers-reduced-motion）はCSS側で対応しています
(function () {
  document.querySelectorAll('[data-bnto-wave]').forEach(function (el) {
    if (el.dataset.bntoInit) return;
    el.dataset.bntoInit = '1';
    var text = el.textContent;
    el.textContent = '';
    Array.prototype.forEach.call(text, function (ch, i) {
      var s = document.createElement('span');
      s.textContent = ch === ' ' ? '\u00A0' : ch;
      s.style.animationDelay = (i * 0.09) + 's'; // ずらして波にする
      el.appendChild(s);
    });
  });
})();

使い方のコツ

アニメーション自体はCSSで、JSは「分割とdelay付与」だけを担当する分業スタイルです。0.09（秒/文字）を大きくすると波がゆったり広がります。常時動き続けるので、ロゴやキャッチコピーなど1か所に絞って使うのがおすすめです。

HOVER OVER ME

ホバーで文字シャッフル

<!-- ランダム英字に置き換わるので英字テキスト向き -->
<p class="bnto-hovmix" data-bnto-hovmix>HOVER OVER ME</p>

.bnto-hovmix {
  --c1: hsl(258 47% 54%);  /* ホバー中の文字色 */
  margin: 0; background: #fff; border: 2px solid #DFE9F1;
  border-radius: 14px; padding: 20px 16px; text-align: center;
  font-family: Consolas, Menlo, monospace;
  font-weight: 700; font-size: 17px; letter-spacing: .03em;
  color: #1D2A36; cursor: default; transition: color .2s;
}
.bnto-hovmix:hover { color: var(--c1); }

// ホバー中はランダム文字に置き換え、離すと元のテキストに戻す
(function () {
  var CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  document.querySelectorAll('[data-bnto-hovmix]').forEach(function (el) {
    if (el.dataset.bntoInit) return;
    el.dataset.bntoInit = '1';
    // 動きを減らす設定なら演出を付けない（テキストはそのまま読める）
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    var text = el.textContent; // 元のテキストを記憶しておく
    var timer = null;
    el.addEventListener('mouseenter', function () {
      clearInterval(timer);
      timer = setInterval(function () {
        var out = '';
        for (var i = 0; i < text.length; i++) {
          out += text[i] === ' ' ? ' ' : CHARS[Math.floor(Math.random() * CHARS.length)];
        }
        el.textContent = out;
      }, 60);
    });
    el.addEventListener('mouseleave', function () {
      clearInterval(timer);
      el.textContent = text; // 離したら復元
    });
  });
})();

使い方のコツ

置き換え文字が英大文字なので、英字の見出しやナビゲーションで使うと自然に見えます（日本語だと見た目の差が大きく読みにくくなります）。タッチデバイスではホバーが発生しないため、装飾として割り切って使ってください。置き換えの速さは 60（ms）で調整できます。

とにかく速いツールです

単語ローテーター

<!-- data-words にカンマ区切りで入れ替える単語を指定 -->
<p class="bnto-rotline">とにかく<span class="bnto-rot" data-bnto-rot data-words="速い,軽い,簡単">速い</span>ツールです</p>

.bnto-rotline {
  --c1: hsl(26 90% 55%);  /* 回転する単語の色 */
  margin: 0; background: #fff; border: 2px solid #DFE9F1;
  border-radius: 14px; padding: 20px 16px; text-align: center;
  font-weight: 800; font-size: 16px; color: #1D2A36;
}
.bnto-rot {
  display: inline-block;
  min-width: 2.5em;  /* 単語が変わっても幅がガタつかないように */
  color: var(--c1); font-weight: 900;
  transition: opacity .25s, transform .25s;
}
.bnto-rot.is-out { opacity: 0; transform: translateY(10px); }

// data-words の単語をフェードしながら順番に表示
(function () {
  document.querySelectorAll('[data-bnto-rot]').forEach(function (el) {
    if (el.dataset.bntoInit) return;
    el.dataset.bntoInit = '1';
    var words = (el.dataset.words || el.textContent).split(',');
    // 動きを減らす設定なら最初の単語のまま固定表示
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    var i = 0;
    setInterval(function () {
      el.classList.add('is-out');            // フェードアウト
      setTimeout(function () {
        i = (i + 1) % words.length;
        el.textContent = words[i].trim();
        el.classList.remove('is-out');       // フェードイン
      }, 250);
    }, 2200);
  });
})();

使い方のコツ

ヒーローのキャッチコピー（「◯◯なサービスです」の◯◯部分）に使うのが定番の場面です。単語は data-words に何個でも追加できます。切り替え間隔は 2200（ms）で調整してください。単語の長さが大きく違う場合は min-width を最長の単語に合わせるとガタつきません。

GLITCH TEXT

グリッチ

<!-- 周期的に＋ホバーで一瞬ノイズが走ります -->
<p class="bnto-glitch" data-bnto-glitch>GLITCH TEXT</p>

.bnto-glitch {
  --c1: hsl(187 63% 42%);  /* ノイズ中の文字色 */
  margin: 0; background: #1D2A36; border-radius: 14px;
  padding: 20px 16px; text-align: center;
  font-family: Consolas, Menlo, monospace;
  font-weight: 700; font-size: 18px; letter-spacing: .05em;
  color: #fff;
}
/* ノイズ中：RGBずれ風の残像 */
.bnto-glitch.is-glitch {
  color: var(--c1);
  text-shadow: 2px 0 rgba(255,0,90,.6), -2px 0 rgba(0,229,255,.6);
}

// 周期的（＋ホバー時）に一瞬だけノイズ文字をチラつかせる
(function () {
  var CHARS = '#$%&@!?<>*+=';
  document.querySelectorAll('[data-bnto-glitch]').forEach(function (el) {
    if (el.dataset.bntoInit) return;
    el.dataset.bntoInit = '1';
    // 動きを減らす設定なら静止したまま表示
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    var text = el.textContent;
    var busy = false;
    function burst() {
      if (busy) return;
      busy = true;
      var count = 0;
      el.classList.add('is-glitch');
      var t = setInterval(function () {
        var out = '';
        for (var i = 0; i < text.length; i++) {
          // 14%の確率でノイズ文字に置き換え
          out += Math.random() < 0.14 ? CHARS[Math.floor(Math.random() * CHARS.length)] : text[i];
        }
        el.textContent = out;
        count++;
        if (count >= 6) {
          clearInterval(t);
          el.textContent = text; // 元に戻す
          el.classList.remove('is-glitch');
          busy = false;
        }
      }, 50);
    }
    setInterval(burst, 2600);                 // 周期発火
    el.addEventListener('mouseenter', burst); // ホバーでも発火
  });
})();

使い方のコツ

発火間隔は 2600（ms）、ノイズの濃さは 0.14（確率）、1回の長さは count >= 6 で調整できます。ダーク系の背景と等幅フォントに載せるとデジタル感が際立ちます。周期発火が不要なら setInterval(burst, 2600) の行を削除して、ホバー専用にもできます。

左から順に色づいていきます

読み上げハイライト

<!-- 見えたタイミングで左から色がスイープ。クリックで再生し直せます -->
<p class="bnto-sweep" data-bnto-sweep>左から順に色づいていきます</p>

.bnto-sweep {
  --c1: hsl(41 100% 47%);  /* スイープ後の文字色 */
  margin: 0; background: #fff; border: 2px solid #DFE9F1;
  border-radius: 14px; padding: 20px 16px; text-align: center;
  font-weight: 800; font-size: 15px; color: #1D2A36;
  cursor: pointer;  /* クリックで再生し直せる合図 */
}
/* スイープ前は薄いグレー */
.bnto-sweep span { color: #C9D6E2; transition: color .35s; }
.bnto-sweep.is-in span { color: var(--c1); }

// 1文字ずつ分割し、見えたら左から順に文字色をスイープ
(function () {
  var io = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-in');
        io.unobserve(entry.target);
      }
    });
  }, { threshold: 0.5 });
  document.querySelectorAll('[data-bnto-sweep]').forEach(function (el) {
    if (el.dataset.bntoInit) return;
    el.dataset.bntoInit = '1';
    var text = el.textContent;
    el.textContent = '';
    var spans = [];
    Array.prototype.forEach.call(text, function (ch, i) {
      var s = document.createElement('span');
      s.textContent = ch === ' ' ? '\u00A0' : ch;
      s.style.transitionDelay = (i * 0.06) + 's'; // 左から順に色づく
      el.appendChild(s);
      spans.push(s);
    });
    // 動きを減らす設定なら最終状態を即表示
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
      el.classList.add('is-in');
      return;
    }
    // クリックで最初から再生し直す
    el.addEventListener('click', function () {
      el.classList.remove('is-in');
      spans.forEach(function (s) { s.style.transition = 'none'; }); // 一瞬で初期状態へ
      void el.offsetWidth; // リフローで状態を確定
      spans.forEach(function (s, i) {
        s.style.transition = '';
        s.style.transitionDelay = (i * 0.06) + 's'; // 時間差を再設定
      });
      el.classList.add('is-in');
    });
    io.observe(el);
  });
})();

使い方のコツ

カラオケの歌詞のように「読ませたい順」を視線誘導できるのが特長です。スイープの速さは 0.06（秒/文字）で調整できます。スイープ前の色 #C9D6E2 を背景に近づけると「浮かび上がる」印象に、濃くすると「色が変わる」印象になります。プレビューをクリック（または↺ボタン）で再生し直せます。

BOUNCE NEAR ME

近接バウンス

<!-- カーソルを文字に近づけると、近い文字だけ持ち上がります -->
<p class="bnto-nearpop" data-bnto-nearpop>BOUNCE NEAR ME</p>

.bnto-nearpop {
  --c1: hsl(119 35% 45%);  /* アクセント色 */
  margin: 0; background: #fff; border: 2px solid #DFE9F1;
  border-radius: 14px; padding: 22px 16px; text-align: center;
  font-weight: 900; font-size: 18px; letter-spacing: .03em;
  color: var(--c1);
}
.bnto-nearpop span {
  display: inline-block;
  transition: transform .15s ease;
}

// カーソルに近い文字だけ、距離に応じてぴょこっと持ち上げる
(function () {
  document.querySelectorAll('[data-bnto-nearpop]').forEach(function (el) {
    if (el.dataset.bntoInit) return;
    el.dataset.bntoInit = '1';
    // 動きを減らす設定なら分割せず、そのまま表示
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    var text = el.textContent;
    el.textContent = '';
    var spans = [];
    Array.prototype.forEach.call(text, function (ch) {
      var s = document.createElement('span');
      s.textContent = ch === ' ' ? '\u00A0' : ch;
      el.appendChild(s);
      spans.push(s);
    });
    var RANGE = 60; // 反応する距離（px）
    el.addEventListener('mousemove', function (e) {
      spans.forEach(function (s) {
        var r = s.getBoundingClientRect();
        var d = Math.abs(e.clientX - (r.left + r.width / 2));
        // 近いほど大きく持ち上げる（最大12px）
        var lift = Math.max(0, 1 - d / RANGE) * 12;
        s.style.transform = lift > 0.5 ? 'translateY(-' + lift.toFixed(1) + 'px)' : '';
      });
    });
    el.addEventListener('mouseleave', function () {
      spans.forEach(function (s) { s.style.transform = ''; });
    });
  });
})();

使い方のコツ

反応する範囲は RANGE（px）、持ち上がる高さは * 12 の部分で調整できます。マウス操作が前提なので、タッチデバイスでは静的なテキストとして表示されるだけです（壊れません）。フッターのロゴやコピーライトに仕込むと遊び心が出ます。

無限マーキー

<!-- 中身は1セットだけ書けばOK。必要な数だけJSが自動で複製します -->
<div class="bnto-marq" data-bnto-marquee data-speed="40" aria-hidden="true">
  <div class="bnto-marq-in"><span>MARQUEE TEXT ◆ VANILLA JS ◆ COPY &amp; PASTE ◆</span></div>
</div>

.bnto-marq {
  --c1: hsl(222 72% 56%);  /* テキスト色 */
  margin: 0; background: #fff; border: 2px solid #DFE9F1;
  border-radius: 14px; padding: 14px 0;
  overflow: hidden;  /* はみ出しを隠して「窓」にする */
}
/* JSが複製したセットを横一列に並べるトラック */
.bnto-marq-in {
  display: flex; width: max-content;
  /* 移動距離(--marq-w)と周期(--marq-dur)はJSが計算して設定 */
  animation: bnto-marq-move var(--marq-dur, 20s) linear infinite;
}
.bnto-marq-in > span {
  flex: none; white-space: nowrap;
  padding-right: .6em;  /* セット同士の間隔 */
  font-weight: 800; font-size: 15px; letter-spacing: .05em;
  color: var(--c1);
}
@keyframes bnto-marq-move {
  to { transform: translateX(calc(-1 * var(--marq-w, 0px))); }
}
/* ホバーで一時停止 */
.bnto-marq:hover .bnto-marq-in { animation-play-state: paused; }
/* 動きを減らす設定の人には静止表示 */
@media (prefers-reduced-motion: reduce) {
  .bnto-marq-in { animation: none; }
}

// 中身の幅を計測し、途切れないよう必要な数だけ複製してループさせる
(function () {
  document.querySelectorAll('[data-bnto-marquee]').forEach(function (el) {
    if (el.dataset.bntoInit) return;
    el.dataset.bntoInit = '1';
    // 動きを減らす設定なら複製せず静止表示（CSS側でも停止）
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    var track = el.querySelector('.bnto-marq-in');
    var unit = track && track.firstElementChild;
    if (!unit) return;
    var speed = parseFloat(el.dataset.speed) || 40; // 流れる速さ（px/秒）
    var w = unit.getBoundingClientRect().width;     // 1セット分の幅を計測
    if (!w) return;
    // コンテナを覆い、さらに1セット余るまで複製（途切れ防止）
    var need = Math.ceil(el.clientWidth / w) + 1;
    for (var i = 1; i < need; i++) track.appendChild(unit.cloneNode(true));
    // 幅から「1ループの移動距離」と「周期（幅÷速さ）」を設定
    function size() {
      var w2 = unit.getBoundingClientRect().width;
      track.style.setProperty('--marq-w', w2 + 'px');
      track.style.setProperty('--marq-dur', (w2 / speed) + 's');
    }
    size();
    // Webフォント読み込みで幅が変わることがあるので計測し直す
    if (document.fonts) document.fonts.ready.then(size);
  });
})();

使い方のコツ

サイト上部の帯やお知らせティッカーの定番演出です。速さは data-speed（px/秒）で調整でき、数値を大きくするほど速く流れます。複製する数はJSが幅から自動計算するので、テキストの長さを変えても修正は不要です。ホバーすると一時停止するため、読みたい人はマウスを載せるだけで読めます。装飾目的なら aria-hidden="true" を付けて、スクリーンリーダーが複製分まで読み上げないようにしておくと安心です。

散らばって、集まる

バラけて集合

<!-- 素のテキストを書くだけ。散らばった文字が定位置へ集合。クリックで再生し直せます -->
<p class="bnto-asmb" data-bnto-assembletext>散らばって、集まる</p>

.bnto-asmb {
  --c1: hsl(214 70% 48%);  /* 文字色 */
  margin: 0; background: #fff; border: 2px solid #DFE9F1;
  border-radius: 14px; padding: 20px 16px; text-align: center;
  font-weight: 900; font-size: 17px; letter-spacing: .04em;
  color: var(--c1);
  cursor: pointer;  /* クリックで再生し直せる合図 */
}
/* JSが生成する1文字ずつのspan */
.bnto-asmb span {
  display: inline-block;
  transition: transform .6s cubic-bezier(.2,.7,.3,1), opacity .6s ease;
}
/* 散らばり状態。位置(--sx/--sy)と角度(--rot)はJSがランダムに設定 */
.bnto-asmb.is-scatter span {
  opacity: 0;
  transform: translate(var(--sx), var(--sy)) rotate(var(--rot));
}

// 1文字ずつ分割し、ランダムに散らばった状態から定位置へ集合させる
(function () {
  document.querySelectorAll('[data-bnto-assembletext]').forEach(function (el) {
    if (el.dataset.bntoInit) return;
    el.dataset.bntoInit = '1';
    // 動きを減らす設定なら分割せず、そのまま表示
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    var text = el.textContent;
    el.textContent = '';
    var spans = [];
    Array.prototype.forEach.call(text, function (ch) {
      var s = document.createElement('span');
      s.textContent = ch === ' ' ? '\u00A0' : ch; // 半角スペースは潰れ防止
      el.appendChild(s);
      spans.push(s);
    });
    function play() {
      spans.forEach(function (s) {
        s.style.transition = 'none'; // 散らばりは一瞬で反映
        s.style.setProperty('--sx', (Math.random() * 160 - 80).toFixed(1) + 'px');
        s.style.setProperty('--sy', (Math.random() * 90 - 45).toFixed(1) + 'px');
        s.style.setProperty('--rot', (Math.random() * 180 - 90).toFixed(1) + 'deg');
      });
      el.classList.add('is-scatter');
      void el.offsetWidth; // リフローで散らばり状態を確定
      spans.forEach(function (s, i) {
        s.style.transition = '';
        s.style.transitionDelay = (i * 0.035) + 's'; // 文字ごとに時間差で集合
      });
      el.classList.remove('is-scatter');
    }
    el.addEventListener('click', play); // クリックで再生
    play();                             // 初期表示時にも1回再生
  });
})();

使い方のコツ

散らばる範囲は * 160・* 90（px）、回転の強さは * 180（deg）で調整できます。集合の時間差は 0.035（秒/文字）、集まる速さはCSSの .6s です。散らばりの座標は再生のたびにランダムなので、何度クリックしても違う動きになります。プレビューをクリック（または↺ボタン）で再生し直せます。

マウスで照らしてください

スポットライトテキスト

<!-- マウスを載せると周囲だけ明るく見えます（タッチ環境では常時表示） -->
<p class="bnto-spot" data-bnto-spottext>マウスで照らしてください</p>

.bnto-spot {
  --c1: hsl(48 95% 62%);  /* 文字色 */
  --mx: 50%; --my: 50%;   /* ライトの位置（JSが更新） */
  margin: 0; background: #1D2A36; border-radius: 14px;
  padding: 20px 16px; text-align: center;
  font-weight: 800; font-size: 16px; letter-spacing: .04em;
  color: var(--c1);
}
/* JSがテキストを包む内側要素 */
.bnto-spot i { font-style: normal; display: inline-block; }
/* ホバー中：マウス周辺だけくっきり、外側は薄く見えるマスク */
.bnto-spot.is-spot i {
  -webkit-mask-image: radial-gradient(circle 70px at var(--mx) var(--my), #000 30%, rgba(0,0,0,.12) 75%);
  mask-image: radial-gradient(circle 70px at var(--mx) var(--my), #000 30%, rgba(0,0,0,.12) 75%);
}

// ホバー中だけマスクを有効にし、マウス位置をCSS変数へ渡す
(function () {
  document.querySelectorAll('[data-bnto-spottext]').forEach(function (el) {
    if (el.dataset.bntoInit) return;
    el.dataset.bntoInit = '1';
    // ホバーできる環境（PC）だけ有効化。タッチでは常時表示のまま
    if (!window.matchMedia('(hover: hover) and (pointer: fine)').matches) return;
    // 動きを減らす設定でも常時表示のまま
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    var inner = document.createElement('i');
    inner.textContent = el.textContent;
    el.textContent = '';
    el.appendChild(inner);
    el.addEventListener('mouseenter', function () { el.classList.add('is-spot'); });
    el.addEventListener('mousemove', function (e) {
      var r = inner.getBoundingClientRect();
      // テキスト左上を原点にした座標をCSS変数へ
      el.style.setProperty('--mx', (e.clientX - r.left) + 'px');
      el.style.setProperty('--my', (e.clientY - r.top) + 'px');
    });
    el.addEventListener('mouseleave', function () { el.classList.remove('is-spot'); }); // 離れたら全文表示に戻す
  });
})();

使い方のコツ

ライトの半径はCSSの circle 70px、照らされていない部分の見え方は rgba(0,0,0,.12)（0に近いほど暗く）で調整できます。ホバーできないタッチデバイスでは自動的に常時表示になるため、読めなくなる心配はありません。ダーク背景のヒーローやフッターの遊び要素として使うと映えます。

NEON SIGN

ネオンのランダム明滅

<!-- ランダムなタイミングで一部の文字がちらつきます -->
<p class="bnto-neon" data-bnto-neonflicker>NEON SIGN</p>

.bnto-neon {
  --c1: hsl(320 90% 66%);  /* ネオンの色 */
  margin: 0; background: #141C26; border-radius: 14px;
  padding: 20px 16px; text-align: center;
  font-weight: 900; font-size: 18px; letter-spacing: .08em;
  color: var(--c1);
}
/* JSが生成する1文字ずつのspan（グロー付き） */
.bnto-neon span {
  display: inline-block;
  text-shadow: 0 0 6px var(--c1), 0 0 18px var(--c1);
}
/* 明滅中：一瞬だけ消えかけの状態 */
.bnto-neon span.is-dim { opacity: .25; text-shadow: none; }

// ランダムな間隔で、ランダムな1文字を看板風にチラつかせる
(function () {
  document.querySelectorAll('[data-bnto-neonflicker]').forEach(function (el) {
    if (el.dataset.bntoInit) return;
    el.dataset.bntoInit = '1';
    var text = el.textContent;
    el.textContent = '';
    var spans = [];
    Array.prototype.forEach.call(text, function (ch) {
      var s = document.createElement('span');
      s.textContent = ch === ' ' ? '\u00A0' : ch; // 半角スペースは潰れ防止
      el.appendChild(s);
      spans.push(s);
    });
    // 動きを減らす設定なら点灯したまま（明滅しない）
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    (function flick() {
      var s = spans[Math.floor(Math.random() * spans.length)]; // 対象の文字もランダム
      var count = 0;
      var t = setInterval(function () {
        s.classList.toggle('is-dim');
        count++;
        if (count >= 4) { clearInterval(t); s.classList.remove('is-dim'); } // 最後は点灯で終わる
      }, 70);
      setTimeout(flick, 500 + Math.random() * 1800); // 次の明滅までランダムに待機
    })();
  });
})();

使い方のコツ

ちらつきの速さは 70（ms）、1回のちらつき回数は count >= 4、発生間隔は 500 + Math.random() * 1800（ms）で調整できます。グローの強さはCSSの text-shadow のぼかし量（6px / 18px）です。ダーク背景に載せると看板らしさが際立ちます。OSの「視差効果を減らす」設定では明滅せず、点灯したままになります。

JSテキストエフェクトの基礎知識

テキストエフェクトは、見出しやキャッチコピーに動きを付けて視線を集めるための演出です。CSSだけでも簡単なアニメーションは作れますが、「文字を1つずつ分割して順番に動かす」「ランダムな文字に置き換える」「マウスの位置に反応させる」といった処理はJavaScriptの得意分野です。このページのサンプルはすべて依存ライブラリなしのバニラJavaScriptで、jQueryもフレームワークも不要です。

使い方は、HTML / CSS / JSの3タブをそれぞれ貼り付けるか、「全部コピー」ボタンでひとまとめになったコードを1回貼り付けるだけです。初期化は data-bnto-* 属性の自動検出式なので、同じページに何個置いても、うっかりコードを2回貼っても壊れません。

文字分割はJavaScriptに任せる

1文字ずつ動かすには各文字を <span> で囲む必要がありますが、手作業で書くとHTMLが読みにくくなり、文言の修正も大変です。このページのサンプルの多くは、初期化時にJSがテキストを自動で分割する設計にしています（1文字ずつ動かすタイプが対象で、テキスト全体を扱う演出は分割しません）。HTMLには素のテキストを書くだけでよく、あとから文言を変えてもコードの修正は不要です。

使いどころはヒーローや見出しに絞る

動くテキストは強力ですが、多用するとページ全体が落ち着かなくなり、本文の可読性も下がります。ファーストビューのキャッチコピーやセクション見出しなど、「ここぞ」という場所に1〜2か所だけ使うのがおすすめです。本文の段落には使わないほうが読みやすさを保てます。

アクセシビリティ（prefers-reduced-motion）への配慮

画面の動きで体調を崩す人のために、OSには「視差効果を減らす」設定があります。このページのサンプルはすべて prefers-reduced-motion を確認し、有効な場合はアニメーションを省略して最終状態のテキストを即座に表示します。自分で演出を追加するときも、この1行のチェックを入れておくと安心です。

「全部コピー」と「分けて貼る」の使い分け

「全部コピー」を使うと、HTML・CSS・JavaScriptがひとつの自己完結ブロックとしてコピーされるので、1回の貼り付けだけですぐ動きを確認できます。動作のお試しや、1ページ完結のLPに組み込むときはこの方法が手軽です。

一方、本番サイトへ本格的に組み込む場合は、CSSはスタイルシート（.cssファイル）へ、JavaScriptは</body>直前や共通の.jsファイルへ、HTMLは使いたい場所へと分けて貼るのが一般的です。スタイルとスクリプトを1か所に集約できるため、複数ページ・複数パーツで使い回すときの管理がしやすく、ブラウザのキャッシュも効きやすくなります。なお、同じパーツをページ内で何度も使う場合でも、CSSとJSを貼るのは1回だけで大丈夫です（初期化スクリプトが該当要素すべてに自動で効きます）。

よくある質問

コピーしたテキストエフェクトはそのまま動きますか？

はい。「全部コピー」を押すとHTML・CSS・JSがひとつの自己完結ブロックになってコピーされ、ページに貼り付けるだけで動きます。ライブラリの読み込みは一切不要です。

HTML側で文字を1つずつspanで囲む必要はありますか？

いいえ、必要ありません。初期化スクリプトが読み込み時にテキストを自動で1文字ずつ分割するため、HTMLには素のテキストを書くだけで大丈夫です。あとから文言を変えてもコードの修正は不要です。

日本語のテキストでも使えますか？

はい。文字分割はJavaScriptが自動で行うため、日本語・英語のどちらでも動きます。ただしホバーで文字シャッフルのようにランダムな英字へ置き換えるタイプは、英字の見出しで使うほうが自然に見えます。

動きが苦手なユーザーへの配慮はありますか？

はい。すべてのサンプルはOSの「視差効果を減らす」設定（prefers-reduced-motion）を確認し、有効な場合はアニメーションを省略して最終状態のテキストを即座に表示します。

このページのパーツはAIコーディングツールでも使えますか？

はい。Claude CodeやCursorのようにWebページを読めるAIには、このページのURLとパーツ名（例:「1文字ずつ出現」）を伝えるだけで実装を指示できます。AIがWebを読めない場合は、「全部コピー」で取得した自己完結ブロックをチャットに貼り付けて調整を頼むのが確実です。改変後のコードは、公開前に動作確認することをおすすめします。

JSテキストエフェクト 12選

スクランブル解読

1文字ずつ出現

波打ちテキスト

ホバーで文字シャッフル

単語ローテーター

グリッチ

読み上げハイライト

近接バウンス

無限マーキー

バラけて集合

スポットライトテキスト

ネオンのランダム明滅

JSテキストエフェクトの基礎知識

文字分割はJavaScriptに任せる

使いどころはヒーローや見出しに絞る

アクセシビリティ（prefers-reduced-motion）への配慮

「全部コピー」と「分けて貼る」の使い分け

よくある質問

関連カテゴリ