【🔰初心者でも簡単】マウスストーカーを実装する

案件の中でマウスストーカーを使う機会がありました。
少しややこしい実装になるかと思いきや、意外と簡単にでき、経験の浅いエンジニアでもできそうだったので共有できればと思っています。

## 使用したJSライブラリ
https://gsap.com/

今回は、GSAPを使用しました。
アニメーションを作る際は100%といってもいいくらいお世話になってます。
スクロールアニメーション等も簡単にできるため、おすすめです。
## 手順
### 1. 追従する要素を準備する
DOMを用意し、適当にスタイルを当てればOKです。
追従したいエリアに```position: relative;```を設定し、その要素の直下に置きます。
ページ全体を追従する場合は、```body```直下に置いてOKです。
```html
<div id="container" class="container">
  <div id="cursor" class="folower"></div>
</div>
```
```css
.container {
  position: relative;
}

.folower {
  width: 40px;
  height: 40px;
  background-color: rgb(0 0 0 / 20%);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}
```
### 2. npmでライブラリをインストール
javascriptを書いていく準備をします。
```zsh
npm install gsap
```
### 3. JSファイルにライブラリをインポート
javascriptのファイルにGSAPをインポートします。
```javascript
import { gsap } from "gsap";
```
### 4. 実装
javascriptを書いていきます。
デフォルトでは要素の左上が基準となっていて、ポインターとずれて見えてしまうため、まずは要素の真ん中にポインターが来るようにずらします。
```javascript
const cursor = document.getElementById('cursor');

gsap.set(cursor, {xPercent: -50, yPercent: -50});
```
追従する動作を書いていきます。


ポインターにピッタリくっついてくるようにある場合は、```quickSetter```を使用。
少し遅れて追従する場合は```quickTo```を使います。

https://gsap.com/docs/v3/GSAP/gsap.quickSetter()/

https://gsap.com/docs/v3/GSAP/gsap.quickTo()/
```javascript
// ピッタリくっつく場合
let xSetter = gsap.quickSetter(cursor, "x", "px") 
let ySetter = gsap.quickSetter(cursor, "y", "px") 

window.addEventListener("mousemove", e => {
  xSetter(e.clientX);
  ySetter(e.clientY);
});
```
```javascript
// 少し遅れて追従する場合（durationやeaseの値を変更すると動きに変化が出ます）
let xTo = gsap.quickTo(cursor, "x", {duration: 0.6, ease: "power3"});
let yTo = gsap.quickTo(cursor, "y", {duration: 0.6, ease: "power3"});

window.addEventListener("mousemove", e => {
  xTo(e.clientX);
  yTo(e.clientY);
});
```
### 5. 完成
```javascript
import { gsap } from "gsap";

const cursor = document.getElementById("cursor");

gsap.set(cursor, {xPercent: -50, yPercent: -50});

// ピッタリくっつく場合
let xSetter = gsap.quickSetter(cursor, "x", "px") 
let ySetter = gsap.quickSetter(cursor, "y", "px") 

window.addEventListener("mousemove", e => {
  xSetter(e.clientX);
  ySetter(e.clientY);
});

// 少し遅れて追従する場合（durationやeaseの値を変更すると動きに変化が出ます）
let xTo = gsap.quickTo(cursor, "x", {duration: 0.6, ease: "power3"});
let yTo = gsap.quickTo(cursor, "y", {duration: 0.6, ease: "power3"});

window.addEventListener("mousemove", e => {
  xTo(e.clientX);
  yTo(e.clientY);
});

```

組み合わせれば、どちらも並行して使うことも可能です。
さらに```mouseenter```や```mouseleave```のイベントでクラスを付けることでホバーアクションを追加することもできます。
カルーセルスライダーと組み合わせるとユニークなPREV・NEXTボタンを実装することもできるため、アレンジして活用してみてはいかがでしょうか。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="bNbZorp" data-pen-title="Mouse Stoker" data-user="Albedo-Japan" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Albedo-Japan/pen/bNbZorp">
  Mouse Stoker</a> by Albedo Japan (<a href="https://codepen.io/Albedo-Japan">@Albedo-Japan</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="wBwOrZg" data-pen-title="Untitled" data-user="Albedo-Japan" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Albedo-Japan/pen/wBwOrZg">
  Untitled</a> by Albedo Japan (<a href="https://codepen.io/Albedo-Japan">@Albedo-Japan</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>