2020年09月01日

マウスの動きについてくるUIの実装方法

こんにちは!SeekNextの佐藤です。今回は「マウスの動きについてくるUIの実装方法」について解説していこうと思います。

See the Pen マウスの動きについてくるUI by seeknext (@seeknext) on CodePen.

実装方法としては以上の通りです。結構簡単なコードで実装可能です!ここで終わっても淡白なので、少しだけコードの中身を解説します!

document.addEventListener('mousemove', function (e) {
  // マウスが移動した時の処理
});

addEventListenerの’mousemove’でマウスが移動した時の処理を記載しています。その後、「clientX」と「clientY」によってマウス位置を取得可能ですので、cssの「transform」にて要素を移動させています。

e.clientX
ブラウザの左上を基準とした X 座標を取得しています。

e.clientY
ブラウザの左上を基準とした Y 座標を取得しています。

※要素をマウスの中心に持っていくために-50pxしています。

スマホの際は、’mousemove’では対応不可なので、’touchmove’イベントを使用して対応しています。その際にブラウザがスクロールすると、使い勝手が悪いので、スクロールしないように「event.preventDefault();」を使って制御しています!

今回はここまでにして、次回はこの技術を使用してちょっとしたゲームやweb制作で使えるアニメーションの実装にフォーカスしていこうと思います。