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

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

使用したJSライブラリ

今回は、GSAPを使用しました。
アニメーションを作る際は100%といってもいいくらいお世話になってます。
スクロールアニメーション等も簡単にできるため、おすすめです。

手順

1. 追従する要素を準備する

DOMを用意し、適当にスタイルを当てればOKです。
追従したいエリアにposition: relative;を設定し、その要素の直下に置きます。
ページ全体を追従する場合は、body直下に置いてOKです。

<div id="container" class="container">
  <div id="cursor" class="folower"></div>
</div>

.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を書いていく準備をします。

npm install gsap

3. JSファイルにライブラリをインポート

javascriptのファイルにGSAPをインポートします。

import { gsap } from "gsap";

4. 実装

javascriptを書いていきます。
デフォルトでは要素の左上が基準となっていて、ポインターとずれて見えてしまうため、まずは要素の真ん中にポインターが来るようにずらします。

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

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

追従する動作を書いていきます。

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

// ピッタリくっつく場合
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);
});

5. 完成

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ボタンを実装することもできるため、アレンジして活用してみてはいかがでしょうか。

See the Pen Mouse Stoker by Albedo Japan (@Albedo-Japan) on CodePen.

See the Pen Untitled by Albedo Japan (@Albedo-Japan) on CodePen.