1.Magnetic Button UIとは
カーソルが近づくと、ボタンが「吸い付く」ように動くインタラクションです。
- 距離に応じて引き寄せられる
- 離れると元の位置に戻る
- 触っている感覚が強くなる
単なるホバー演出ではなく、「操作している感触」を作るUIです。
このような動きは、アニメーションの基礎であるrequestAnimationFrameや補間（lerp）の考え方を使って実現できます。
2.基本の考え方
やっていることはシンプルです。
- カーソルとボタンの距離を計算
- 一定距離内なら引き寄せる
- 離れたら元の位置へ戻す
3.実装（シンプル版）
<div class="magnetic-wrap">
<button class="magnetic-btn">Hover Me</button>
</div>body {
height: 200vh;
display: flex;
justify-content: center;
align-items: center;
background: #0e0e0e;
}
.magnetic-wrap {
width: 200px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.magnetic-btn {
padding: 16px 32px;
font-size: 16px;
background: #ffffff;
color: #000;
border: none;
cursor: pointer;
transition: transform 0.2s ease;
}const wrap = document.querySelector(".magnetic-wrap");
const btn = document.querySelector(".magnetic-btn");
wrap.addEventListener("mousemove", (e) => {
const rect = wrap.getBoundingClientRect();
const x = e.clientX - rect.left - rect.width / 2;
const y = e.clientY - rect.top - rect.height / 2;
btn.style.transform = `translate(${x * 0.2}px, ${y * 0.2}px)`;
});
wrap.addEventListener("mouseleave", () => {
btn.style.transform = `translate(0, 0)`;
});4.強化版（滑らかにする）
ここからが重要です。
lerp（線形補間）で動きを滑らかにします。
let targetX = 0;
let targetY = 0;
let currentX = 0;
let currentY = 0;
wrap.addEventListener("mousemove", (e) => {
const rect = wrap.getBoundingClientRect();
targetX = (e.clientX - rect.left - rect.width / 2) * 0.3;
targetY = (e.clientY - rect.top - rect.height / 2) * 0.3;
});
wrap.addEventListener("mouseleave", () => {
targetX = 0;
targetY = 0;
});
function animate() {
currentX += (targetX - currentX) * 0.1;
currentY += (targetY - currentY) * 0.1;
btn.style.transform = `translate(${currentX}px, ${currentY}px)`;
requestAnimationFrame(animate);
}
animate();5.実験：Magneticインタラクションを体験
以下を試してみてください。
- カーソルをゆっくり近づける
- 速く動かす
- 端から端まで動かす
観察ポイント
- 距離によって吸引の強さが変わる
- lerpによる「遅れて追従する感じ」
- 離れた時の戻りの気持ちよさ
6.応用アイデア
この仕組みは色々使えます。
- CTAボタン
- カードUI
- ナビゲーション
強さを調整するだけで印象が変わります。
スクロールに応じたインタラクションと組み合わせることもできます。
今回の実装で使っている基礎はこちらで詳しく解説しています。
7.まとめ
Magnetic Button UIは、
- 距離計算
- 補間（lerp）
- フレーム更新（requestAnimationFrame）
を組み合わせたインタラクションです。
見た目はシンプルですが、
「触って気持ちいいUI」を作る重要な要素が詰まっています。
コメントを残す