Web BENTO JS
カテゴリ一覧
クリック演出

11 / EFFECTS 12 パーツ

クリック演出のJS実装 12選

Q: コピーしたクリック演出はそのまま動きますか？

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

Q: 波紋や紙吹雪で生成されたDOMは増え続けませんか？

増えません。生成した要素はすべて animationend イベントやタイマーでアニメーション終了と同時に自動削除されるため、何度クリックしてもDOMが溜まらず、メモリリークの心配もありません。

Q: スマホのタップでも動きますか？

動きます。click イベントはタップでも発火し、波紋やスターバーストの座標も clientX / clientY から取得しているため、タップした位置から正しく演出が始まります。長押しゲージは Pointer Events でタッチにも対応しています。

Q: 「視差効果を減らす」設定のユーザーにはどう見えますか？

各スクリプトは prefers-reduced-motion を判定し、有効な場合は波紋や紙吹雪などの装飾アニメーションをスキップして、カウント増加やチェック表示などの状態変化だけを行います。演出なしでも機能は完全に使えます。

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

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

コピペで動くクリック演出（マイクロインタラクション）のサンプル集です。プレビューは実際にクリック・長押しで試せます。HTML / CSS / JS タブでコードを確認し、全部コピーを押せば1回の貼り付けで完成します。すべて依存ライブラリなしのバニラJSで、生成したDOMはアニメーション終了と同時に自動削除します。

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

リップル（波紋）

<button type="button" class="bnto-ripple" data-bnto-ripple>
  クリックしてみて
</button>

.bnto-ripple {
  --c1: hsl(202 73% 50%);  /* ボタン色 */
  position: relative; overflow: hidden;
  padding: 13px 28px; border: none; border-radius: 12px;
  background: var(--c1); color: #fff;
  font: inherit; font-weight: 800; cursor: pointer;
}
/* JSが生成する波紋。終わったら自動削除される */
.bnto-ripple .rp {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.45);
  transform: scale(0);
  animation: bnto-rip .6s ease-out forwards;
  pointer-events: none;
}
@keyframes bnto-rip {
  to { transform: scale(2.6); opacity: 0; }
}

// クリック位置から波紋を生成 → animationend で自動削除
(function () {
  var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  document.querySelectorAll('[data-bnto-ripple]').forEach(function (btn) {
    if (btn.dataset.bntoInit) return;
    btn.dataset.bntoInit = '1';
    btn.addEventListener('click', function (e) {
      if (reduced) return; // 動きを減らす設定では演出をスキップ
      var r = btn.getBoundingClientRect();
      var size = Math.max(r.width, r.height);
      var x = e.clientX ? e.clientX - r.left : r.width / 2;
      var y = e.clientY ? e.clientY - r.top : r.height / 2;
      var rp = document.createElement('span');
      rp.className = 'rp';
      rp.style.width = rp.style.height = size + 'px';
      rp.style.left = (x - size / 2) + 'px';
      rp.style.top = (y - size / 2) + 'px';
      btn.appendChild(rp);
      rp.addEventListener('animationend', function () { rp.remove(); });
    });
  });
})();

使い方のコツ

Material Design でおなじみの「押した感」演出です。波紋の色は .rp の background で調整できます。明るい色のボタンなら rgba(0,0,0,.15) の黒波紋も自然です。親要素の overflow: hidden が波紋のはみ出し防止に必須です。

いいねハート

<button type="button" class="bnto-like" data-bnto-like>
  <span class="ht" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg></span>
  いいね <b class="n">12</b>
</button>

.bnto-like {
  --c1: hsl(345 80% 55%);  /* ハート色 */
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 22px; border: 2px solid #DFE9F1;
  border-radius: 999px; background: #fff;
  font: inherit; font-weight: 800; cursor: pointer;
}
.bnto-like .ht { position: relative; width: 20px; height: 20px; color: #C9C2B4; transition: color .2s; }
.bnto-like .ht > svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; }
.bnto-like.is-liked .ht { color: var(--c1); }
.bnto-like.is-liked .ht > svg { fill: currentColor; }
/* ポンと弾む */
.bnto-like .ht.is-pop { animation: bnto-like-pop .45s cubic-bezier(.2,2,.4,1); }
@keyframes bnto-like-pop { 30% { transform: scale(1.45); } }
/* JSが生成する小ハート。飛び終わると自動削除 */
.bnto-like .fly {
  position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  color: var(--c1); pointer-events: none;
  animation: bnto-like-fly .7s ease-out forwards;
}
.bnto-like .fly svg { display: block; width: 100%; height: 100%; fill: currentColor; }
@keyframes bnto-like-fly {
  to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; }
}
.bnto-like .n { color: var(--c1); font-weight: 900; }

// いいね：ハートが弾んで小ハートが飛ぶ（もう一度押すと取り消し）
(function () {
  var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  var HEART = '<svg viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>';
  document.querySelectorAll('[data-bnto-like]').forEach(function (btn) {
    if (btn.dataset.bntoInit) return;
    btn.dataset.bntoInit = '1';
    var ht = btn.querySelector('.ht');
    var n = btn.querySelector('.n');
    btn.setAttribute('aria-pressed', btn.classList.contains('is-liked'));
    btn.addEventListener('click', function () {
      var liked = btn.classList.toggle('is-liked');
      btn.setAttribute('aria-pressed', liked);
      n.textContent = (parseInt(n.textContent, 10) || 0) + (liked ? 1 : -1);
      if (!liked || reduced) return; // 取り消し時と動きを減らす設定では演出なし
      ht.classList.remove('is-pop');
      void ht.offsetWidth; // 連打でもアニメを最初から再生
      ht.classList.add('is-pop');
      for (var i = 0; i < 6; i++) {
        var f = document.createElement('span');
        f.className = 'fly';
        f.innerHTML = HEART;
        var a = (Math.PI * 2 / 6) * i + Math.random() * 0.5;
        f.style.setProperty('--dx', Math.cos(a) * 28 + 'px');
        f.style.setProperty('--dy', (Math.sin(a) * 28 - 8) + 'px');
        ht.appendChild(f);
        f.addEventListener('animationend', function () { this.remove(); });
      }
    });
  });
})();

使い方のコツ

もう一度押すと取り消し（−1）になるトグル式です。状態は aria-pressed で支援技術にも伝わります。飛び散る小ハートの数は for の回数、飛距離は 28 の値で調整します。実運用ではクリック時にサーバーへ送信する処理を追加してください。

成功チェック変化

<button type="button" class="bnto-done" data-bnto-done>
  <span class="tx">保存する</span>
  <span class="sp" aria-hidden="true"></span>
  <svg class="ok" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>
</button>

.bnto-done {
  --c1: hsl(150 58% 42%);  /* ボタン色 */
  position: relative; min-width: 160px;
  padding: 13px 24px; border: none; border-radius: 12px;
  background: var(--c1); color: #fff;
  font: inherit; font-weight: 800; cursor: pointer;
}
.bnto-done .tx { transition: opacity .2s; }
.bnto-done.is-loading .tx, .bnto-done.is-done .tx { opacity: 0; }
.bnto-done .sp, .bnto-done .ok {
  position: absolute; left: 50%; top: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  opacity: 0; pointer-events: none;
}
/* スピナー */
.bnto-done .sp {
  box-sizing: border-box;
  border: 3px solid rgba(255,255,255,.35);
  border-top-color: #fff; border-radius: 50%;
}
.bnto-done.is-loading .sp { opacity: 1; animation: bnto-done-spin .7s linear infinite; }
@keyframes bnto-done-spin { to { transform: rotate(360deg); } }
/* チェック */
.bnto-done.is-done .ok { opacity: 1; animation: bnto-done-pop .35s cubic-bezier(.2,2,.4,1); }
@keyframes bnto-done-pop { from { transform: scale(0); } }

// ボタン → スピナー → ✓ → 2秒で元に戻る（処理中の二重クリックは無視）
(function () {
  var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  document.querySelectorAll('[data-bnto-done]').forEach(function (btn) {
    if (btn.dataset.bntoInit) return;
    btn.dataset.bntoInit = '1';
    btn.addEventListener('click', function () {
      if (btn.classList.contains('is-loading') || btn.classList.contains('is-done')) return;
      function done() {
        btn.classList.remove('is-loading');
        btn.classList.add('is-done');
        setTimeout(function () { btn.classList.remove('is-done'); }, 2000);
      }
      if (reduced) { done(); return; } // 動きを減らす設定：スピナーを飛ばして即✓
      btn.classList.add('is-loading');
      setTimeout(done, 900); // ← 実際は保存処理の完了時に done() を呼ぶ
    });
  });
})();

使い方のコツ

デモは setTimeout(done, 900) で保存処理を疑似再現しています。実際は fetch(...).then(done) のように通信完了時に done() を呼ぶだけでOKです。処理中の再クリックはクラス判定でガード済みなので、二重送信防止にもなります。

紙吹雪

<div class="bnto-confetti" data-bnto-confetti>
  <button type="button" class="go">🎉 紙吹雪を飛ばす</button>
</div>

.bnto-confetti {
  --c1: hsl(258 47% 54%);  /* ボタン色 */
  position: relative; display: inline-block;
}
.bnto-confetti .go {
  padding: 13px 26px; border: none; border-radius: 12px;
  background: var(--c1); color: #fff;
  font: inherit; font-weight: 800; cursor: pointer;
}
/* JSが生成する紙片。落ちきったら自動削除 */
.bnto-confetti .pc {
  position: absolute; top: -6px;
  width: 8px; height: 13px; border-radius: 2px;
  pointer-events: none;
  animation: bnto-conf-fall var(--t, 1s) ease-in both;
}
@keyframes bnto-conf-fall {
  from { opacity: 1; transform: translateY(-14px) rotate(0deg); }
  to   { opacity: 0; transform: translateY(84px) rotate(var(--r, 360deg)); }
}

// 紙吹雪：色ランダムなDOM片を生成して舞い落とす → 自動削除
(function () {
  var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  var COLORS = ['#FF5A4D', '#F7B32B', '#5BA85A', '#3DA9E0', '#9B6BD3', '#F26BA0'];
  document.querySelectorAll('[data-bnto-confetti]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    box.querySelector('.go').addEventListener('click', function () {
      if (reduced) return; // 動きを減らす設定では演出をスキップ
      for (var i = 0; i < 18; i++) {
        var p = document.createElement('span');
        p.className = 'pc';
        p.style.left = (5 + Math.random() * 90) + '%';
        p.style.background = COLORS[Math.floor(Math.random() * COLORS.length)];
        p.style.setProperty('--r', (Math.random() * 720 - 360) + 'deg');
        p.style.setProperty('--t', (0.8 + Math.random() * 0.7) + 's');
        p.style.animationDelay = (Math.random() * 0.15) + 's';
        box.appendChild(p);
        p.addEventListener('animationend', function () { this.remove(); });
      }
    });
  });
})();

使い方のコツ

枚数は for の回数、色は COLORS 配列で自由に調整できます。購入完了・登録完了・レベルアップなど「ここぞ」の1回だけに使うのが効果的です。毎クリックで出すと安っぽくなるので注意です。

メールアドレスを入力してください

シェイクエラー

<!-- デモ用に「エラーを出す」ボタン付き。実際はバリデーション失敗時に発動 -->
<div class="bnto-shake" data-bnto-shake>
  <input class="ipt" type="text" placeholder="メールアドレス" aria-label="メールアドレス">
  <p class="er">メールアドレスを入力してください</p>
  <button type="button" class="go">エラーを出す</button>
</div>

.bnto-shake {
  --c1: hsl(4 75% 55%);  /* エラー色 */
  display: flex; flex-direction: column; gap: 10px;
  max-width: 240px;
}
.bnto-shake .ipt {
  padding: 11px 14px; border: 2px solid #DFE9F1;
  border-radius: 10px; font: inherit;
  transition: border-color .2s;
}
.bnto-shake.is-error .ipt { border-color: var(--c1); animation: bnto-shake-x .4s; }
@keyframes bnto-shake-x {
  10%, 50%, 90% { transform: translateX(-6px); }
  30%, 70%      { transform: translateX(6px); }
}
/* 動きを減らす設定：震えは止めて赤枠＋文言の状態変化だけ残す */
@media (prefers-reduced-motion: reduce) {
  .bnto-shake.is-error .ipt { animation: none; }
}
.bnto-shake .er { display: none; margin: 0; font-size: 12px; font-weight: 700; color: var(--c1); }
.bnto-shake.is-error .er { display: block; }
.bnto-shake .go {
  align-self: flex-start; padding: 9px 16px;
  border: none; border-radius: 10px;
  background: #1D2A36; color: #fff;
  font: inherit; font-weight: 800; cursor: pointer;
}

// 誤操作時にぶるっと震える（1.5秒でエラー表示を解除）
(function () {
  document.querySelectorAll('[data-bnto-shake]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var timer = null;
    box.querySelector('.go').addEventListener('click', function () {
      box.classList.remove('is-error');
      void box.offsetWidth; // 連打でもアニメを最初から再生
      box.classList.add('is-error');
      clearTimeout(timer);
      timer = setTimeout(function () { box.classList.remove('is-error'); }, 1500);
    });
  });
})();

使い方のコツ

実際のフォームでは「エラーを出す」ボタンの代わりに、送信時のバリデーション失敗で is-error を付与してください。震え幅は translateX の値で調整できます。動きを減らす設定のユーザーには、CSSのメディアクエリで震えだけ止めて赤枠とメッセージは表示されます。

長押しゲージ

<button type="button" class="bnto-hold" data-bnto-hold>
  <span class="bar" aria-hidden="true"></span>
  <span class="tx">長押しで確定</span>
</button>

.bnto-hold {
  --c1: hsl(187 63% 42%);  /* アクセント色 */
  --hold: 1s;               /* 必要な長押し時間 */
  position: relative; overflow: hidden; min-width: 180px;
  padding: 13px 24px; border: 2px solid var(--c1);
  border-radius: 12px; background: #fff; color: var(--c1);
  font: inherit; font-weight: 800; cursor: pointer;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
  transition: background .25s, color .25s;
}
/* 押している間だけ溜まるゲージ */
.bnto-hold .bar {
  position: absolute; left: 0; bottom: 0;
  height: 5px; width: 0; background: var(--c1);
  transition: width .25s ease;  /* 離したときの巻き戻し */
}
.bnto-hold.is-holding .bar { width: 100%; transition: width var(--hold) linear; }
.bnto-hold.is-done { background: var(--c1); color: #fff; }
.bnto-hold.is-done .bar { width: 0; }
.bnto-hold .tx { position: relative; }

// 長押しゲージ：押している間だけ溜まり、満タンで確定（途中で離すとキャンセル）
(function () {
  document.querySelectorAll('[data-bnto-hold]').forEach(function (btn) {
    if (btn.dataset.bntoInit) return;
    btn.dataset.bntoInit = '1';
    var tx = btn.querySelector('.tx');
    var org = tx.textContent;
    var timer = null;
    function start(e) {
      if (btn.classList.contains('is-done')) return;
      e.preventDefault();
      btn.classList.add('is-holding');
      var ms = parseFloat(getComputedStyle(btn).getPropertyValue('--hold')) * 1000 || 1000;
      timer = setTimeout(function () {
        btn.classList.remove('is-holding');
        btn.classList.add('is-done');
        tx.textContent = '確定しました';
        // ここに確定時の処理を書く
        setTimeout(function () {
          btn.classList.remove('is-done');
          tx.textContent = org;
        }, 1800);
      }, ms);
    }
    function cancel() {
      clearTimeout(timer);
      btn.classList.remove('is-holding');
    }
    btn.addEventListener('pointerdown', start);
    btn.addEventListener('pointerup', cancel);
    btn.addEventListener('pointerleave', cancel);
  });
})();

使い方のコツ

削除・送金など取り返しのつかない操作の誤タップ防止に効く定番UIです。必要な長押し時間は --hold（秒）を変えるだけで、CSSのゲージ速度とJSの判定が連動します。ゲージは装飾ではなく進捗表示なので、reduced-motion 環境でもそのまま機能します。

カウントバッジポップ

<button type="button" class="bnto-badge" data-bnto-badge>
  カートに追加
  <span class="bg">2</span>
</button>

.bnto-badge {
  --c1: hsl(26 90% 55%);  /* バッジ色 */
  position: relative;
  padding: 13px 26px; border: 2px solid #DFE9F1;
  border-radius: 12px; background: #fff;
  font: inherit; font-weight: 800; cursor: pointer;
}
.bnto-badge .bg {
  position: absolute; top: -10px; right: -10px;
  box-sizing: border-box; min-width: 22px; height: 22px;
  padding: 0 6px; border-radius: 999px;
  background: var(--c1); color: #fff;
  font-size: 12px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
/* 数字が跳ねる */
.bnto-badge .bg.is-pop { animation: bnto-badge-pop .4s cubic-bezier(.2,2.5,.4,1); }
@keyframes bnto-badge-pop { 40% { transform: scale(1.45); } }

// クリックでバッジの数値が跳ねて増える（カート追加風）
(function () {
  var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  document.querySelectorAll('[data-bnto-badge]').forEach(function (btn) {
    if (btn.dataset.bntoInit) return;
    btn.dataset.bntoInit = '1';
    var bg = btn.querySelector('.bg');
    bg.addEventListener('animationend', function () { bg.classList.remove('is-pop'); });
    btn.addEventListener('click', function () {
      bg.textContent = (parseInt(bg.textContent, 10) || 0) + 1;
      if (reduced) return; // 数だけ増やして演出はスキップ
      bg.classList.remove('is-pop');
      void bg.offsetWidth; // 連打でもアニメを最初から再生
      bg.classList.add('is-pop');
    });
  });
})();

使い方のコツ

ヘッダーのカートアイコンや通知ベルに付けても同じ仕組みで動きます。数値の変化＋バウンドで「追加できた」ことが視覚的に伝わり、確認ダイアログを出さずに済むのがポイントです。跳ね幅は scale(1.45) で調整してください。

スターバースト

<button type="button" class="bnto-burst" data-bnto-burst>
  クリックで星が弾ける
</button>

.bnto-burst {
  --c1: hsl(41 100% 47%);  /* 星の色 */
  position: relative;
  padding: 13px 28px; border: none; border-radius: 12px;
  background: #1D2A36; color: #fff;
  font: inherit; font-weight: 800; cursor: pointer;
}
/* JSが生成する星。飛び終わると自動削除 */
.bnto-burst .st {
  position: absolute; width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px;
  color: var(--c1); pointer-events: none;
  animation: bnto-burst-fly .6s ease-out forwards;
}
.bnto-burst .st svg { display: block; width: 100%; height: 100%; fill: currentColor; }
@keyframes bnto-burst-fly {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to   { transform: translate(var(--dx), var(--dy)) rotate(var(--r, 0deg)) scale(.2); opacity: 0; }
}

// クリック点から星形パーティクルを放射 → 自動削除
(function () {
  var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  var STAR = '<svg viewBox="0 0 24 24"><path d="M12 2l2.9 6.2 6.6.8-4.9 4.6 1.3 6.6L12 17l-5.9 3.2 1.3-6.6L2.5 9l6.6-.8Z"/></svg>';
  document.querySelectorAll('[data-bnto-burst]').forEach(function (btn) {
    if (btn.dataset.bntoInit) return;
    btn.dataset.bntoInit = '1';
    btn.addEventListener('click', function (e) {
      if (reduced) return; // 動きを減らす設定では演出をスキップ
      var r = btn.getBoundingClientRect();
      var x = e.clientX ? e.clientX - r.left : r.width / 2;
      var y = e.clientY ? e.clientY - r.top : r.height / 2;
      for (var i = 0; i < 8; i++) {
        var s = document.createElement('span');
        s.className = 'st';
        s.innerHTML = STAR;
        s.style.left = x + 'px';
        s.style.top = y + 'px';
        var a = (Math.PI * 2 / 8) * i + Math.random() * 0.4;
        var d = 30 + Math.random() * 24;
        s.style.setProperty('--dx', Math.cos(a) * d + 'px');
        s.style.setProperty('--dy', Math.sin(a) * d + 'px');
        s.style.setProperty('--r', (Math.random() * 240 - 120) + 'deg');
        btn.appendChild(s);
        s.addEventListener('animationend', function () { this.remove(); });
      }
    });
  });
})();

使い方のコツ

お気に入り登録・スタンプ・実績解除など「ごほうび感」を出したい場面に向いています。星の数は for の回数、飛距離は d の値で調整できます。ボタンの外まで飛ばしたいときは親要素に overflow: hidden を付けないよう注意してください。

エリア内でマウスを動かしてみてください

テキストリンク

マウスストーカー

<!-- デモ用のミニエリア。ページ全体で使うときは body 直下に .st だけを置き、position: fixed で運用 -->
<div class="bnto-stalker" data-bnto-stalker>
  <span class="st" aria-hidden="true"></span>
  <p class="gd">エリア内でマウスを動かしてみてください</p>
  <a class="lk" href="#">テキストリンク</a>
  <button type="button" class="bt">ボタン</button>
</div>

.bnto-stalker {
  --c1: hsl(288 55% 52%);  /* 円の色 */
  position: relative; overflow: hidden;  /* 円のはみ出し防止 */
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 22px 16px;
  background: #fff; border: 2px dashed #DFE9F1; border-radius: 14px;
}
.bnto-stalker .gd { margin: 0; font-size: 11.5px; color: #8a847a; }
.bnto-stalker .lk { font-weight: 800; color: var(--c1); }
.bnto-stalker .bt {
  padding: 9px 18px; border: 2px solid #DFE9F1; border-radius: 10px;
  background: #fff; font: inherit; font-weight: 800; cursor: pointer;
}
/* 追いかける円。位置はJSがtransformで動かす */
.bnto-stalker .st {
  position: absolute; left: 0; top: 0;  /* ページ全体なら position: fixed に */
  width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border: 2px solid var(--c1); border-radius: 50%;
  pointer-events: none; z-index: 2; opacity: 0;
  transition: width .25s, height .25s, margin .25s, background .25s, border-color .25s, opacity .2s;
}
.bnto-stalker.is-in .st { opacity: 1; }
/* リンク・ボタンにホバー中：拡大＋色変化 */
.bnto-stalker.is-hover .st {
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  background: var(--c1); border-color: transparent; opacity: .4;
}
/* 動きを減らす設定では表示しない（JS側でも初期化ごと止めている） */
@media (prefers-reduced-motion: reduce) {
  .bnto-stalker .st { display: none; }
}

// マウスストーカー：カーソルを円が遅れて追いかける（rAF＋イージング）
(function () {
  // タッチデバイスでは動かさない（hoverと精密ポインタがある環境のみ）
  if (!window.matchMedia('(hover: hover) and (pointer: fine)').matches) return;
  // 動きを減らす設定ではストーカー自体を無効化
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
  document.querySelectorAll('[data-bnto-stalker]').forEach(function (area) {
    if (area.dataset.bntoInit) return;
    area.dataset.bntoInit = '1';
    // デモはエリア内で完結。ページ全体で使う場合は body に data-bnto-stalker を付け、
    // .st を position: fixed に（座標補正 r.left / r.top が 0 になるだけでそのまま動きます）
    var st = area.querySelector('.st');
    var x = 0, y = 0, cx = 0, cy = 0, raf = null;
    function loop() {
      cx += (x - cx) * 0.15; // ← 小さいほど遅れて追う（0.05〜0.3が目安）
      cy += (y - cy) * 0.15;
      st.style.transform = 'translate(' + cx + 'px,' + cy + 'px)';
      raf = requestAnimationFrame(loop);
    }
    area.addEventListener('mousemove', function (e) {
      var r = area.getBoundingClientRect();
      x = e.clientX - r.left;
      y = e.clientY - r.top;
      if (raf === null) { cx = x; cy = y; loop(); } // エリア内にいる間だけrAFを回す
      area.classList.add('is-in');
    });
    area.addEventListener('mouseleave', function () {
      area.classList.remove('is-in');
      cancelAnimationFrame(raf);
      raf = null;
    });
    // リンク・ボタンの上では拡大＋色変化
    area.querySelectorAll('a, button').forEach(function (el) {
      el.addEventListener('mouseenter', function () { area.classList.add('is-hover'); });
      el.addEventListener('mouseleave', function () { area.classList.remove('is-hover'); });
    });
  });
})();

使い方のコツ

ページ全体に適用する場合は、body に data-bnto-stalker を付けて .st を position: fixed で body 直下に置くだけです。.st に mix-blend-mode: difference; background: #fff; を指定すると、下の色を反転する人気の演出になります。追従の遅れは 0.15 の係数で調整でき、タッチデバイスと「視差効果を減らす」設定の環境では自動で無効になります。

NEW

3Dチルトカード

マウスの位置に合わせてカードが立体的に傾きます

3Dチルトカード

<!-- data-max: 最大の傾き（度・省略時は10） -->
<div class="bnto-tilt" data-bnto-tiltcard data-max="10">
  <span class="tag">NEW</span>
  <p class="tt">3Dチルトカード</p>
  <p class="ds">マウスの位置に合わせてカードが立体的に傾きます</p>
</div>

.bnto-tilt {
  --c1: hsl(212 68% 50%);  /* アクセント色 */
  max-width: 230px; padding: 20px 18px;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 14px;
  /* 離れたときの戻りをなめらかに */
  transition: transform .18s ease-out;
  will-change: transform;
}
.bnto-tilt .tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--c1); color: #fff; font-size: 10.5px; font-weight: 900; }
.bnto-tilt .tt { margin: 10px 0 6px; font-size: 14.5px; font-weight: 800; color: #1D2A36; }
.bnto-tilt .ds { margin: 0; font-size: 11.5px; font-weight: 700; color: #5A6B7A; }

// 3Dチルトカード：マウス位置に合わせて立体的に傾く（離れると元に戻る）
(function () {
  // タッチデバイスでは動かさない（hoverと精密ポインタがある環境のみ）
  if (!window.matchMedia('(hover: hover) and (pointer: fine)').matches) return;
  // 動きを減らす設定では傾けない
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
  document.querySelectorAll('[data-bnto-tiltcard]').forEach(function (card) {
    if (card.dataset.bntoInit) return;
    card.dataset.bntoInit = '1';
    var max = parseFloat(card.dataset.max || '10'); // ← 最大の傾き（度）
    card.addEventListener('mousemove', function (e) {
      var r = card.getBoundingClientRect();
      var px = (e.clientX - r.left) / r.width - 0.5; // 中心からの位置（-0.5〜0.5）
      var py = (e.clientY - r.top) / r.height - 0.5;
      card.style.transform = 'perspective(600px) rotateX(' + (-py * max * 2) + 'deg) rotateY(' + (px * max * 2) + 'deg)';
    });
    card.addEventListener('mouseleave', function () { card.style.transform = ''; });
  });
})();

使い方のコツ

傾きの強さは data-max 属性（度数）で調整できます。奥行き感は perspective(600px) の値を小さくするほど強調されます。カード内に画像やリンクを置いてもそのまま動きます。タッチデバイスと「視差効果を減らす」設定の環境では自動で無効になり、通常のカードとして表示されます。

マグネットボタン

<!-- 外側のdivが判定エリア。data-pull: 吸い付き強度（省略時は0.35） -->
<div class="bnto-magnet" data-bnto-magnetbtn data-pull="0.35">
  <button type="button" class="btn">吸い付くボタン</button>
</div>

.bnto-magnet {
  --c1: hsl(165 60% 40%);  /* ボタン色 */
  display: flex; align-items: center; justify-content: center;
  max-width: 260px; min-height: 130px;
  background: #fff; border: 2px dashed #DFE9F1; border-radius: 14px;
}
.bnto-magnet .btn {
  padding: 13px 26px; border: none; border-radius: 999px;
  background: var(--c1); color: #fff;
  font: inherit; font-weight: 800; cursor: pointer;
  transition: transform .25s;  /* 離れたときの戻り */
  will-change: transform;
}

// マグネットボタン：カーソルが判定エリアに入るとボタンが吸い付く
(function () {
  // タッチデバイスでは動かさない（hoverと精密ポインタがある環境のみ）
  if (!window.matchMedia('(hover: hover) and (pointer: fine)').matches) return;
  // 動きを減らす設定では吸い付かせない
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
  document.querySelectorAll('[data-bnto-magnetbtn]').forEach(function (area) {
    if (area.dataset.bntoInit) return;
    area.dataset.bntoInit = '1';
    var btn = area.querySelector('.btn');
    var pull = parseFloat(area.dataset.pull || '0.35'); // ← 吸い付き強度（0.2〜0.5が目安）
    area.addEventListener('mousemove', function (e) {
      var r = btn.getBoundingClientRect();
      var dx = e.clientX - (r.left + r.width / 2); // ボタン中心からの距離
      var dy = e.clientY - (r.top + r.height / 2);
      btn.style.transform = 'translate(' + (dx * pull) + 'px,' + (dy * pull) + 'px)';
    });
    area.addEventListener('mouseleave', function () { btn.style.transform = ''; });
  });
})();

使い方のコツ

吸い付きの強さは data-pull（0.2〜0.5が目安）で調整します。判定エリア（外側のdiv）を広めにとるほど「遠くから引き寄せられる」感じが強まります。CTAなど1画面に1つの主役ボタンに使うと効果的です。タッチデバイスと「視差効果を減らす」設定の環境では自動で無効になり、通常のボタンとして機能します。

0COMBO

連打コンボカウンター

<!-- data-wait: リセットまでの待ち時間（ms・省略時は1000） -->
<div class="bnto-combo" data-bnto-combobtn data-wait="1000">
  <p class="cnt"><b class="num">0</b><span class="unit">COMBO</span></p>
  <button type="button" class="go">連打してみて！</button>
</div>

.bnto-combo {
  --c1: hsl(330 75% 52%);  /* 数字とボタンの色 */
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: 220px; padding: 18px 16px;
  background: #fff; border: 2px solid #DFE9F1; border-radius: 14px;
}
.bnto-combo .cnt { display: flex; align-items: baseline; gap: 6px; margin: 0; color: #5A6B7A; }
.bnto-combo .num { font-size: 34px; font-weight: 900; line-height: 1; color: var(--c1); }
.bnto-combo .unit { font-size: 11px; font-weight: 900; letter-spacing: .08em; }
/* 数字がポップに弾む */
.bnto-combo .num.is-pop { animation: bnto-combo-pop .3s cubic-bezier(.2,2,.4,1); }
@keyframes bnto-combo-pop { 50% { transform: scale(1.4); } }
.bnto-combo .go {
  padding: 11px 24px; border: none; border-radius: 999px;
  background: var(--c1); color: #fff;
  font: inherit; font-weight: 800; cursor: pointer;
}

// 連打コンボ：クリックのたびに数字が弾み、間が空くと0にリセット
(function () {
  var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  document.querySelectorAll('[data-bnto-combobtn]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var num = box.querySelector('.num');
    var wait = parseInt(box.dataset.wait, 10) || 1000; // ← リセットまでの待ち時間（ms）
    var count = 0;
    var timer = null;
    box.querySelector('.go').addEventListener('click', function () {
      count++;
      num.textContent = count;
      clearTimeout(timer);
      timer = setTimeout(function () {
        count = 0;
        num.textContent = count;
      }, wait);
      if (reduced) return; // 数だけ増やして演出はスキップ
      num.classList.remove('is-pop');
      void num.offsetWidth; // 連打でもアニメを最初から再生
      num.classList.add('is-pop');
    });
  });
})();

使い方のコツ

リセットまでの時間は data-wait（ミリ秒）で調整できます。弾み具合は scale(1.4) の値で変えられます。キャンペーンのミニゲームや「いいね連打」のような遊び要素のある場面に向いています。連打を煽る演出なので、通常の業務UIでは使いどころを選んでください。

クリック演出JSの基礎知識

クリック演出は、ボタンを押した瞬間に波紋や小さなアニメーションで反応を返すマイクロインタラクションの代表格です。「押せた」ことが目で見て分かるので操作の不安が減り、いいねや追加などの行動が気持ちよくなります。このページのサンプルはすべて依存ライブラリなしのバニラJavaScriptで、jQueryもアニメーションライブラリも不要です。

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

マイクロインタラクションの効果

クリックへの即時フィードバックには、(1) 操作が受け付けられたことを伝える、(2) 処理の状態（読み込み中→完了）を伝える、(3) 行動に小さな報酬を与える、という3つの役割があります。リップルや成功チェックは(1)(2)、いいねハートや紙吹雪は(3)の典型例です。逆に長押しゲージのようにあえて操作を重くして誤操作を防ぐのもマイクロインタラクションの仕事です。

やりすぎに注意 — 演出は「控えめ・短く・ここぞ」

演出は多用するほど効果が薄れ、うるさいサイトになります。目安は0.3〜0.7秒で終わる短いアニメーションを、意味のある操作にだけ付けることです。紙吹雪のような派手な演出は購入完了など「1セッションに1回」の場面に限定しましょう。また、OSの「視差効果を減らす」設定（prefers-reduced-motion）のユーザーには演出をスキップし、カウント増加などの状態変化だけを届けるのがマナーです。このページのスクリプトはすべて対応済みです。

生成DOMの後始末とパフォーマンス

波紋・紙吹雪・星などのパーティクルはクリックのたびにDOM要素を生成します。削除を忘れると要素が無限に溜まり、メモリと描画性能を圧迫する典型的なバグにつながります。このページの実装は、すべての生成要素に animationend イベント（またはタイマー）でアニメーション終了と同時に remove() を仕込んであるので、連打してもDOMは増え続けません。また、アニメーションは transform と opacity だけで動かしているため、レイアウト再計算が発生せず軽量です。

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

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

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

よくある質問

コピーしたクリック演出はそのまま動きますか？

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

波紋や紙吹雪で生成されたDOMは増え続けませんか？

増えません。生成した要素はすべて animationend イベントやタイマーでアニメーション終了と同時に自動削除されるため、何度クリックしてもDOMが溜まらず、メモリリークの心配もありません。

スマホのタップでも動きますか？

動きます。click イベントはタップでも発火し、波紋やスターバーストの座標も clientX / clientY から取得しているため、タップした位置から正しく演出が始まります。長押しゲージは Pointer Events でタッチにも対応しています。

「視差効果を減らす」設定のユーザーにはどう見えますか？

各スクリプトは prefers-reduced-motion を判定し、有効な場合は波紋や紙吹雪などの装飾アニメーションをスキップして、カウント増加やチェック表示などの状態変化だけを行います。演出なしでも機能は完全に使えます。

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

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

クリック演出のJS実装 12選

リップル（波紋）

いいねハート

成功チェック変化

紙吹雪

シェイクエラー

長押しゲージ

カウントバッジポップ

スターバースト

マウスストーカー

3Dチルトカード

マグネットボタン

連打コンボカウンター

クリック演出JSの基礎知識

マイクロインタラクションの効果

やりすぎに注意 — 演出は「控えめ・短く・ここぞ」

生成DOMの後始末とパフォーマンス

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

よくある質問

関連カテゴリ