ホバーの「オン・オフ」だけでなく、カーソルとの距離で要素を少しずつ拡大する（近接インタラクション）

どんな問題を解決するか / いつ使うか

ドック、ツールバー、アイコンの並びなどに、生き生きとした操作感を加えたいとき。

やり方

onpointermove = e =>
  document.querySelectorAll(".dock>*").forEach(el => {
    const r = el.getBoundingClientRect();
    // 要素の中心から120px以内なら 0〜1 の近さを計算
    const t = Math.max(0, 1 - Math.abs(e.clientX - r.x - r.width / 2) / 120);
    el.style.scale = 1 + t * 0.5; // 最大1.5倍
  });

• 120（反応する距離）と 0.5（最大の拡大率）を調整する。拡大だけでなく、濃さ（opacity や filter）を変えてもよい。

注意点・対応状況

• prefers-reduced-motion の環境では無効にする。
• タッチ端末には効かないので、ホバーがなくても使えるようにしておく。
• 元のコードは el. style とスペースが入っているが、正しくは el.style。

出典

• 投稿者: @gabriell_lab (Gabriel)
• 投稿: @gabriell_lab · 2026-05-29
• 投稿日: 2026-05-29（JST）
• 収集日: 2026-10-09（JST）