カーソルが要素を押しのける「反発アニメーション」をCSSとJavaScriptで実装する方法

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

Webサイトを見ていると、思わずマウスを動かしたくなるような仕掛けに出会うことがあります。
その中でも特に印象に残りやすいのが、カーソルが近づいた瞬間に要素がスッと逃げるように動く挙動です。

まるで磁石の反発や水面を指で押したような感覚があり、単なる装飾ではなく「触って楽しいUI体験」を生み出します。
この「反発アニメーション」は、アニメーションを派手にしなくても、ユーザーに強い印象を残せるのが大きな特徴です。
特にコーポレートサイトや採用ページ、サービス紹介ページでは、堅すぎず、しかしふざけすぎない絶妙な遊び心として機能します。
浜松の飲食店や店舗サイトでも、ボタンやカードがカーソルに反応するだけで「ちゃんと作られているサイト」という印象につながります。
重要なのは、難しそうに見えて実はそこまで複雑ではないという点です。
CSSのトランジションとJavaScriptでカーソル位置を取得するだけで、十分に実用的な反発表現が作れます。
この記事では、カーソルが要素を押しのける「反発アニメーション」をテーマに、仕組みの考え方から実装方法、そして実務での活かし方までを整理して解説していきます。
演出を入れたいけれど重くしたくない、そんな方にこそ試してほしいUI表現です。

---

反発アニメーションとは何か

反発アニメーションとは、カーソルが要素に近づいたときに、その要素が押しのけられるように移動するインタラクション表現です。
単なるhoverアニメーションとは異なり、カーソル位置との距離をもとに動きが発生します。

この挙動によって、画面に「物理的な存在感」が生まれます。

---

デモコード

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

---

実装の基本的な考え方

反発アニメーションは、次の流れで実装します。

ポイントは「近いほど強く、遠いほど弱く」動かすことです。
この距離ベースの制御が、自然な反発感を生み出します。

---

HTML構造の例

<div class="repel-area">
  <div class="repel-item">HOVER ME</div>
</div>

構造は非常にシンプルです。
動かしたい要素にクラスを付けるだけでOKです。

---

CSSで初期位置と動きを定義する

body {
  margin: 0;
  background: #0b0f1a;
  height: 100vh;
  overflow: hidden;
  font-family: sans-serif;
}

.repel-area {
  width: 100%;
  height: 100vh;
  position: relative;
}

.repel-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 60px;
  transform: translate(-50%, -50%);
  background: #ffffff;
  color: #000;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition: transform 0.15s ease-out;
  user-select: none;
}

CSSでは、transformの変化をなめらかにすることが重要です。

---

JavaScriptで反発ロジックを実装

const item = document.querySelector('.repel-item');

document.addEventListener('mousemove', (e) => {
  const rect = item.getBoundingClientRect();

  const itemX = rect.left + rect.width / 2;
  const itemY = rect.top + rect.height / 2;

  const dx = e.clientX - itemX;
  const dy = e.clientY - itemY;

  const distance = Math.sqrt(dx * dx + dy * dy);

  const maxDistance = 160;
  const strength = Math.max(0, maxDistance - distance) / maxDistance;

  const moveX = -dx * strength * 0.4;
  const moveY = -dy * strength * 0.4;

  item.style.transform = `translate(calc(-50% + ${moveX}px), calc(-50% + ${moveY}px))`;
});

距離が離れると自然に元の位置へ戻るため、余計なリセット処理は不要です。

---

実務での活用シーン

特に浜松の店舗サイトでは、「触って楽しい」体験が記憶に残りやすくなります。

---

使う際の注意点

装飾はあくまで体験を補助するものとして使うことが重要です。

---

まとめ

カーソルが要素を押しのける反発アニメーションは、少ないコードで大きな体験価値を生み出せるUI表現です。
CSSとJavaScriptだけで実装でき、サイトの印象をワンランク引き上げてくれます。
派手すぎず、それでいて印象に残る演出として、ぜひ一度取り入れてみてください。