【jQuery+CSS】マウスカーソル変更＆マウスストーカー実装

## 実装サンプル

![demo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638572/02ffd2bb-47c4-e2c4-d4ef-c9b563435c46.gif)

## コード

```html
		
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body class="top_page">
	・
	・
	・
	<div id="cursor"></div>
    <div id="stalker"></div>
	・
	・
	・
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="./js/main.js"></script>
  </body>
</html>
```

```css
#cursor {
  width: 26px;
  height: 26px;
  background-image: url("../img/icon_cheese.png");
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
}

#stalker {
  width: 30px;
  height: 30px;
  background-image: url("../img/icon_mouse.png");
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
}
```

```jsx
let $cursor = $("#cursor");
let $stalker = $("#stalker");
$(document).on('mousemove', function (e) {
  let x = e.clientX;
  let y = e.clientY;
  $cursor.css({
    'top': y + 'px',
    'left': x + 'px',
    'transform': 'translate(-50%, -50%)',
  })
  setTimeout(function () {
    $stalker.css({
      'top': y + 'px',
      'left': x + 'px',
      'transform': 'translate(20px, -16px)',
    });
  }, 100);
});
```

## 解説

### HTML

```html
<div id="cursor"></div>
<div id="stalker"></div>
```

マウスカーソルに追従させる要素を作成。
カーソルのみの場合はストーカー用のタグは不要。

### CSS


```css
#cursor {
  width: 26px;
  height: 26px;
  background-image: url("../img/icon_cheese.png");
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
}

#stalker {
  width: 30px;
  height: 30px;
  background-image: url("../img/icon_mouse.png");
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
}
```

マウスカーソル要素を絶対配置（position: fixed）を設定。
fixedにしないと画面をスクロールした際にカーソルがどっかに行ってしまう。
デザインはWEBページなどのテーマに合わせてお好みで ！
デフォルトのカーソルを非表示にしたい場合は

```css
body,
a,
input,
select,
textarea {
	cursor: none;
}
```

を指定し非表示にする。

### jQuery

```jsx
let $cursor = $("#cursor");
let $stalker = $("#stalker");
$(document).on('mousemove', function (e) { // マウスが動くたびにイベント発火
  let x = e.clientX; // マウスのX軸座標を取得
  let y = e.clientY; // マウスのY軸座標を取得
  $cursor.css({
    'top': y + 'px', // 取得した座標でY軸を動的に変更
    'left': x + 'px', // 取得した座標でX軸を動的に変更
    'transform': 'translate(-50%, -50%)',　// カーソルを中央に配置
  })
  setTimeout(function () { // ストーカーがない場合は不要
    $stalker.css({
      'top': y + 'px', // Y軸を動的に変更
      'left': x + 'px', // X軸を動的に変更
      'transform': 'translate(20px, -16px)',
    });
  }, 100); // 0.1秒後にストーカーを追従
});
```

まずは、カーソルとストライカーのDOMを取得。
次にマウスカーソルが動くたびにイベントを発火させ、マウスカーソルのXとY軸の座標を取得し、取得した座標で動的にCSSの値（top: 0 left: 0）を変更し、マウスカーソルに追従させる。
このままだとカーソルの配置が左上に寄ってしまうので、transformでカーソルを中央に配置。
ストーカーがある場合はsetTimeoutで指定の秒数後に追従させる。

以上です。