マウスのカーソルを追従するマウスストーカーの作り方

マウスのカーソルを追従するマウスストーカーの作り方です。

CSSでマウスストーカーのスタイルを設定する

マウスストーカーの色は background 、大きさは width height で変更できます。

マウスのカーソルを動かしたときに少し遅れて付いてくるようにしますが、
そのときの遅延具合を transition の transform の数値で調整できます。
数値を大きくすると追従する速度がより遅く、小さくするとより速くなります。

.mouse-stalker {
  background: rgba(green, 0.4);
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  transition:
    transform 0.6s,
    width .5s, height .5s,
    background-color .5s;
  transition-timing-function: ease-out;
  z-index: 999;

  @media screen and ( max-width: 599px ) {
    display: none;
  }
}

スマホでは非表示になるようにしています。class名は適宜変更してください。

JavaScriptでマウスストーカーを作成する

div を作成して body に追加します。
CSSでマウスストーカーのスタイルを設定するために class も付与しています。

  const stalker = document.createElement('div');
  stalker.setAttribute('class', 'mouse-stalker');

  document.body.appendChild(stalker);

画面の左上に先ほど設定した色とサイズのマウスストーカーが表示されます。
この時点ではまだマウスを追従しません。

マウスのカーソルを追従させるfunctionを作成して実行する

clientX clientY でマウスのカーソルの位置（ウィンドウの左端と上からの距離）を取得します。
CSSの translate に取得したマウスの座標を設定し、
マウスストーカーの位置をマウスのカーソルの位置と同じ位置に移動させます。

mousemove でマウスが動くたびにfuntionが実行され、
マウスのカーソルの位置 = マウスストーカーの位置が更新されます。

このとき最初にCSSで transform の値を遅延させるように設定しているので、
マウスストーカーが少し遅れてカーソルを追従するような動きになります。

const mouseMove = (e) => {
  stalker.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
}

document.addEventListener('mousemove', mouseMove);

デモ

サンプルとソースはこちら（CodePen）