カーソルを引き寄せるマグネットボタン

この実装は vanilla JavaScript で書いています。jQuery が必要であれば document.querySelector を $() に置き換える程度で動作しますが、近年は jQuery を使わない方が軽量で推奨されます。

UI コンポーネント Medium #js #mouse #interaction #magnet

マウスカーソルに引き寄せられる磁石効果ボタン。Awwwards 系のクリエイティブサイトで頻出。JavaScript + transform translate でなめらか追従。

解説

カーソルを引き寄せるマグネットボタンは、UI コンポーネントカテゴリの「ボタン」に分類される実装パターンです。CSS と JavaScript の組み合わせで構成され、難易度は中級レベル。

カーソル位置に応じてボタンが引き寄せられるマグネット効果。Awwwards 系のおしゃれサイトで使われる注目度の高いインタラクション。

マウスカーソルがボタンの近くに来ると、ボタン自体がカーソルに「引き寄せられる」演出です。Awwwards 受賞サイト・ポートフォリオサイトでよく見る、印象的なマイクロインタラクション。

マウスのボタン中心からの相対位置を JavaScript で計算し、transform: translate() でボタンを少し動かしています。CSS transition で 0.2 秒程度のイージングを入れるとなめらかな質感になります。

下記コードタブから HTML / CSS / JS をそれぞれ確認・コピーできます。プレビュー領域では実際の動作をその場で確認可能です。

JavaScript 部分は vanilla（プレーン）JS で書かれており、jQuery / React / Vue いずれの環境にも持ち込めます。

モバイルではホバーが効かないので、メディアクエリ @media (hover: hover) で PC のみ有効化するのが推奨。タッチデバイスでは通常ボタンとして動作します。

同時に多数のマグネットボタンを置くと CPU が高負荷になることがあるので、ヒーローセクション・CTA など要所に限定して使ってください。

GSAP を使わずに実装したい

このサンプルは vanilla JS のみです。GSAP を使うとイージングがさらに自然になりますが、必須ではありません。

ボタンの大きさを変えると挙動も変わりますか？

JS 内の引き寄せ強度（多くの場合 0.3 〜 0.5 倍）を調整すれば、サイズに関わらず自然な動きにできます。

このスニペットは商用利用できますか？

はい。moatway がオリジナルで制作したスニペットは商用・個人問わず自由にご利用いただけます。クレジット表記も不要です。

そのまま貼り付ければ動きますか？

はい。HTML / CSS / JS タブのコードをそれぞれ自分のファイルにコピーして貼り付ければ動きます。クラス名が他の CSS と衝突しないよう、必要に応じてリネームしてください。

ブラウザ対応は？

最新 2 世代の Chrome / Safari / Firefox / Edge で動作確認しています。Internet Explorer はサポート対象外です。

jQuery でも書けますか？

この実装は vanilla JavaScript で書いています。jQuery が必要であれば document.querySelector を $() に置き換える程度で動作しますが、近年は jQuery を使わない方が軽量で推奨されます。

このスニペットをシェア