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

12月 16, 2025 12月 16, 2025

小瀧

こんにちは！静岡県浜松市で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))`;
});

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