基本的なマウスストーカーの実装方法

アニメーションライブラリーを使わずに素のJavaScriptを利用して、基本的なマウスストーカーの実装方法を紹介します。

実装の考え方

マウスストーカーを実装するには、マウスの座標を取得して、その座標に要素を移動させることで実現できます。マウスストーカー自体は、divタグで.mouse-cursorというクラスを付与して作成します。

マウス座標は、JavaScriptのmousemoveイベントで取得します。
アニメーションは、translateプロパティを利用してマウスストーカーを移動させます。

実装方法

それでは実際に実装していきましょう。
まずはHTMLになります。

HTML

<div class="mouse-cursor"></div>

先述の通り、マウスストーカーはdivタグで.mouse-cursorというクラスを付与して作成します。

CSS

.mouse-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #000;
}

マウスストーカーは、position: fixedで固定しておきます。このデモでは、マウスストーカーのサイズは40pxに設定し、border-radiusで丸にし、背景色は黒にしています。

CSSでマウスストーカーをマウスの中心に設定する方法もありますが、このデモではJavaScriptでマウスストーカーをマウスの中心に設定するようにしています。

JavaScript

const mouseCursor = document.querySelector('.mouse-cursor');

document.addEventListener('mousemove', (e) => {
  const mouseRect = mouseCursor.getBoundingClientRect();
  const mouseX = e.clientX - mouseRect.width / 2;
  const mouseY = e.clientY - mouseRect.height / 2;

  mouseCursor.style.translate = `${mouseX}px ${mouseY}px`;
});

マウス座標は、JavaScriptのmousemoveイベントで取得します。
マウスストーカーの中心にマウスを合わせるために、mouseCursor.getBoundingClientRect()でマウスストーカーの大きさを取得して、その半分の値をマウス座標から引きます。

このmouseXとmouseYの引き算の計算を行わないと、上記画像の左上を基準としてマウスストーカーが移動してしまいます。理解のために、e.clientXとe.clientYのみの実装も試してみてください。

最後にマウスストーカーを移動させるために、translateプロパティにmouseXとmouseYを設定して完成です！

マウスストーカーを遅延させる方法

現状の実装ですと、transitionプロパティが適用されていないため、マウス移動したらすぐにマウスストーカーが移動します。これを解消するためには、.mouse-cursorにtransitionプロパティを設定しましょう。

CSS

.mouse-cursor {
  transition: 0.3s;
}

デモでは、スライダーでtransitionの値を変更できるようにしているので、試してみてください！

Feylo