ホバー時に、マウスの動きに追従するボタンの実装方法

悩んでいる人

・ボタンホバー時に、マウスに合わせて動くボタンの実装を知りたい

・マウスに追従させる実装方法を知りたい

こんな疑問や悩みに答えます。

今回の実装は以下になります。
コードだけわかればいいという人は、以下のコードを参考に作成したり、自分用に修正して見てください。

See the Pen Untitled by 森寅治 (@moritoraji) on CodePen.

とらまる

このブログ「とらまるブログ」の運営者。2019年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログ情報発信を行っている。これまでのWeb制作実績は40件以上。

この記事を書こうと思った背景は、実際に追従ボタンを作成するのにかなり時間をかけて実装した経験があります。JavaScriptが絡んでおり、当時の自分にとってはかなり難易度が高かったです。
そのため、今回のような実装で悩んでいる方がいたら、ぜひこの記事を参考にしていただきたいです。

HTML, CSSコード
1. HTML
2. CSS
追従する動きに必要な機能(JavaScript)
1. マウスがボタンにホバーした時の動き（図解説明有り）
2. マウスがボタンから離れた時の動き
まとめ

HTML, CSSコード

HTML、CSSコードは単純なので、簡単に説明します。

HTML

<div class="btn">
  <a href="#" class="js-button button">詳細を見る</a>
</div>

js-buttonクラス名をJavaScriptで取得して、動きを実装します。
HTMLのクラス名をJavaScriptから取得する場合は、取得するクラス名の接頭辞にjs-をつけるのが基本です。

CSS

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 196px;
  height: 56px;
  color: #000;
  font-size: 14px;
  border: 1px solid #9c00ff;
  transition: all 0.5s ease-out;
  text-decoration: none;
  margin-top: 30px;
  margin-left: 30px;
}

transition: all 0.5s ease-out;を設定しておくことで、ボタンホバー時とカーソルがボタン要素から離れた時に、ボタンの動きをつけています。

追従する動きに必要な機能(JavaScript)

const contactButtons = document.querySelectorAll('.js-button');

contactButtons.forEach(contactButtons => {
  // マウスがボタンにホバーした時
  contactButtons.addEventListener('mousemove', (e) => {
    const eventtData =e.currentTarget.getBoundingClientRect();
    const interpolatePosX = ((e.clientX - (eventtData.width / 2)) - eventtData.left) * .5;
    const interpolatePosY = ((e.clientY - (eventtData.height / 2)) - eventtData.top) * .5;
    e.currentTarget.style.transform = "translate(" + interpolatePosX + "px, " + interpolatePosY + "px)";
  })

  // カーソルがボタン要素から離れた時
  contactButtons.addEventListener('mouseleave', (e) => {
    e.currentTarget.style.transform = "translate(0, 0)";
  })
})

今回は、主にJavaScirptの実装がメインになります。動きとしては、主に2点になります。

マウスがボタンにホバーした時(addEventListener(‘mousemove’, (e) => { })、ボタンがマウスの動きに追従して動く
マウスがある距離から離れた時(addEventListener(‘mouseleave’, (e) => { })、ボタンが元の位置に戻る

マウスがボタンにホバーした時の動き（図解説明有り）

以下の説明は、addEventListener(‘mousemove’, (e) => { }内の説明になります。

上記の図は、interpolatePosの文字列の式が、それぞれどこの値を指しているのか算出、説明しています。

eventData=e.currentTarget.getBoundingClientRect();は、ボタン位置やサイズなどをブラウザ画面の左上を基準にして値を取得しています。

clientX,Yは、カーソル位置をブラウザ画面の左上を基準にして取得しています。
より詳しく知りたい人は以下にそれぞれのリンクを貼っておきます。

getBoundingClientRect() メソッド
 MouseEvent.clientX

interpolatePosXは、( カーソルの位置X – ボタンの幅/2 ) – ボタンの位置Xで、ボタン幅の半分の値を算出しています。
interpolatePosYは、( カーソルの位置Y – ボタンの高さ/2 ) – ボタンの位置Yでボタン高さの半分の値を算出しています。
上記の図解を見ながら、考えると理解しやすいと思います。

* 0.5は、ボタン幅の半分の値だと動きが大きすぎるので、調整値になります。自由に設定可能です。

最後に、transform = “translate(” + interpolatePosX + “px, ” + interpolatePosY + “px)”; でボタンの動きを反映しています。

今回の実装したボタンは、以下の範囲で動きます。