カーソルにボタンが少しくっつくホバーアニメーション

制作物

ホバーすると少しカーソルにくっついてくるボタン。
最近デザインギャラリーでよく見かけるな、と思ったので作ってみました。

解説

ボタンの上に乗った時の処理

ボタンの上に乗った時に、ボタンをマウスカーソルの方向へ少し動かすように記述すればOKです。

ボタンのX座標 = ((マウスカーソルのX座標) - (ボタンの横幅 / 2) - (ボタンのX座標))

このように記述するとボタンの上に乗った時に、ボタンがマウスカーソルに追従するようになります。

この値に1以下の任意の値をを掛けて、くっついてくる座標の限界値を決めます。

ボタンのX座標 = ((マウスカーソルのX座標) - (ボタンの横幅 / 2) - (ボタンのX座標)) * 0.3

このボタンのX座標の値をtransform: translateXに代入してあげればOKです。Y座標も同様です。

button.addEventListener('mousemove', e => {
  let x = ((e.clientX - (buttonRect.width / 2)) - buttonRect.left ) * 0.3;
  let y = ((e.clientY - (buttonRect.height / 2)) - buttonRect.top) * 0.3;
  button.style.transform = "translate(" + x + "px, " + y + "px)";
})

ボタンの上から離れた時の処理

ボタンの上から離れた時の処理は簡単です。
もともとの位置に戻してあげればいいのでtransform: translate(0, 0)を指定してあげます。

button.addEventListener('mouseleave', e => {
  button.style.transform = "translate(0, 0)";
})

動きをもう少しリッチにしてみる

もうすこし気持ちいいアニメーションにしてみます。

まず、ホバーした時にscaleを指定して少しボタンを拡大します。
さらにmousemoveとmouseleaveでtransitionを変えます。
ここではボタンから離れた時に少し遅くしてみます。

button.addEventListener('mousemove', e => {
  let x = ((e.clientX - (buttonRect.width / 2)) - buttonRect.left ) * 0.3;
  let y = ((e.clientY - (buttonRect.height / 2)) - buttonRect.top) * 0.3;
-  button.style.transform = "translate(" + x + "px, " + y + "px)";
+  button.style.transform = "translate(" + x + "px, " + y + "px) scale(1.05)";
+  button.style.transition = "transform 0.2s"
})

button.addEventListener('mouseleave', e => {
-  button.style.transform = "translate(0, 0)";
+  button.style.transform = "translate(0, 0) scale(1)";
+  button.style.transition = "transform 0.5s"
})

これで、ボタンにカーソルを乗せた時、離れた時少しアニメーションがリッチになりました。
もっとイージングにこだわればもっと気持ち良いアニメーションが作れそうですね！