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

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

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

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

```scss
.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 0.5s,
    height 0.5s,
    background-color 0.5s;
  transition-timing-function: ease-out;
  z-index: 999;

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

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

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

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

```js
const stalker = document.createElement("div");
stalker.setAttribute("class", "mouse-stalker");

document.body.appendChild(stalker);
```

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

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

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

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

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

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

document.addEventListener("mousemove", mouseMove);
```

## デモ

[サンプルとソースはこちら（CodePen）](https://codepen.io/chocolat5/pen/NWaqdQo)


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

Tags