マウスカーソルを追従するマウスストーカーの作り方【jQuery・JavaScript】

カーソルの後を追いかけてくる丸いやつ、あれって何ていうの？どうやって作るの？

これはマウスストーカーと言い、デモを見れば分かると思います。

ここで、カーソルを動き回してみて下さい。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

カーソルが動いた後を、円が遅れて付いてきます。

『マウスカーソルのストーカー』ってことですね。

実務でもあまりありませんが、今回はこのマウスストーカーの実装方法を解説していきます。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

30日間でWeb制作を学べる
完全無料
現役エンジニアへの質問無制限
オンラインの動画学習なので時間場所を問わず勉強可能
最大4回の学習サポート面談
受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼完全無料／

ZeroPlus Gate公式サイト

先着1日25名まで！

マウスストーカーの作り方

今回はjQueryを使うので、jQueryを使ったことがない人は、まずは以下の記事を参照下さい（JavaScriptの場合も解説します）

: 【初心者向け】jQueryとは？CDNを使った本体の読み込み方も分かりやすく解説
続きを見る

HTMLの基本はこちらです。

<div class="stalker" id="js-stalker"></div>

どこに書いても大丈夫ですが、分かりやすいようにbody閉じタグ直前あたりにしておきましょう。

  <div class="stalker" id="js-stalker"></div>
</body>

通常

CSSはこちら。

/* マウスストーカーのスタイル */
.stalker {
  background-color: rgba(28,180,211,.5); /* 背景色 */
  border-radius: 50%; /* 正円 */
  height: 30px; /* 円の高さ */
  left: -15px; /* widthの半分 */
  opacity: 0; /* カーソルを画面内に入れるまでは透明 */
  pointer-events: none; /* 直下のリンクをクリック可能にする */
  position: fixed; /* スクロールしてもカーソルの位置で固定 */
  top: -15px; /* widthの半分 */
  transition: transform .3s ease-out; /* 遅れてついてくる時間 */
  width: 30px; /* 円の幅 */
  z-index: 999; /* 一番上に来るように */
}

各数値は変更可能ですが、以下の点だけ注意して下さい。

leftとtopはheightとwidthの半分（カーソルの位置を円の中心にするため）
z-indexは一番上に来るようにする

jQueryはこちら。

$(function () {
  const stalker = $("#js-stalker");
  $(document).on("mousemove", function (e) {
    // マウスの座標を取得
    const x = e.clientX;
    const y = e.clientY;
    // ストーカーの位置を更新
    stalker.css({
      opacity: 1, // カーソルが画面内に入ったら不透明にする
      transform: "translate(" + x + "px, " + y + "px)", // マウスの座標に移動
    });
  });
});

#js-stalkerはHTMLで設定したID名です。

デモは冒頭でも載せたこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

JavaScriptの場合はこちら。

document.addEventListener("DOMContentLoaded", function () {
  const stalker = document.getElementById("js-stalker");
  document.addEventListener("mousemove", function (e) {
    // マウスの座標を取得
    const x = e.clientX;
    const y = e.clientY;
    // ストーカーの位置を更新
    stalker.style.opacity = "1"; // カーソルが画面内に入ったら不透明にする
    stalker.style.transform = "translate(" + x + "px, " + y + "px)"; // マウスの座標に移動
  });
});

デモはこちら。

See the Pen
マウスストーカー（通常：JavaScript） by junpei (@junpei-sugiyama)
on CodePen.

リンクhover時に大きくなる

CSSはこちら。

/* マウスストーカーのスタイル */
.stalker {
  background-color: rgba(28, 180, 211, .5); /* 背景色 */
  border-radius: 50%; /* 正円 */
  height: 30px; /* 円の高さ */
  left: -15px; /* 円の幅の半分 */
  opacity: 0; /* カーソルを画面内に入れるまでは透明 */
  pointer-events: none; /* 直下のリンクをクリック可能にする */
  position: fixed; /* スクロールしてもカーソルの位置で固定 */
  top: -15px; /* 円の高さの半分 */
  transition: all .3s ease-out; /* 遅れてついてくる時間 */
  width: 30px; /* 円の幅 */
  z-index: 999; /* 一番上に来るように */
}
/* リンクにホバーした時のスタイル */
.stalker.js-hover {
  background-color: rgba(255, 99, 71, .5); /* カーソルがリンク上に乗ったときの背景色 */
  height: 50px; /* カーソルがリンク上に乗ったときの高さ */
  left: -25px; /* 円の幅の半分 */
  top: -25px; /* 円の高さの半分 */
  width: 50px; /* カーソルがリンク上に乗ったときの幅 */
}

マウスストーカーのスタイルは先ほどとほぼ同じで、違う点はtransition: transform .3s ease-out;がtransition: all .3s ease-out;になったことです。

今回は、transitionをあてるのが『transform・height・width』とあるからです。

jQueryはこちら。

$(function () {
  const stalker = $("#js-stalker");
  $(document).on("mousemove", function (e) {
    // マウスの座標を取得
    const x = e.clientX;
    const y = e.clientY;
    // ストーカーの位置を更新
    stalker.css({
      opacity: 1, // カーソルが画面内に入ったら不透明にする
      transform: "translate(" + x + "px, " + y + "px)", // マウスの座標に移動
    });
  });
  $("a").on({
    mouseenter: function () {
      stalker.addClass("js-hover"); // リンクにカーソルが乗ったときに拡大するクラスを追加
    },
    mouseleave: function () {
      stalker.removeClass("js-hover"); // リンクからカーソルが離れたときに拡大するクラスを削除
    },
  });
});

$("a")に関しては、spanタグなら$("span")など、変更して下さい。

デモはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

JavaScriptの場合はこちら。

document.addEventListener("DOMContentLoaded", function () {
  const stalker = document.getElementById("js-stalker");
  const links = document.querySelectorAll("a");
  document.addEventListener("mousemove", function (e) {
    // マウスの座標を取得
    const x = e.clientX;
    const y = e.clientY;
    // ストーカーの位置を更新
    stalker.style.opacity = "1"; // カーソルが画面内に入ったら不透明にする
    stalker.style.transform = "translate(" + x + "px, " + y + "px)"; // マウスの座標に移動
  });
  links.forEach(function (link) {
    link.addEventListener("mouseenter", function () {
      stalker.classList.add("js-hover"); // リンクにカーソルが乗ったときに拡大するクラスを追加
    });
    link.addEventListener("mouseleave", function () {
      stalker.classList.remove("js-hover"); // リンクからカーソルが離れたときに拡大するクラスを削除
    });
  });
});

デモはこちら。

See the Pen
マウスストーカー（リンクhover時に大きくなる：JavaScript） by junpei (@junpei-sugiyama)
on CodePen.

リンクhover時に小さくなる

これは先ほどのCSSの、リンクにホバーした時のスタイルを変えるだけです。

/* リンクにホバーした時のスタイル */
.stalker.js-hover {
  height: 15px; /* カーソルがリンク上に乗ったときの高さ */
  left: -7.5px; /* 円の幅の半分 */
  top: -7.5px; /* 円の高さの半分 */
  width: 15px; /* カーソルがリンク上に乗ったときの幅 */
}

この2つだけ変えます。

デモはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

JavaScriptも、リンクにホバーして大きくなるときと同じです。

デモはこちら。

See the Pen
マウスストーカー（リンクhover時に小さくなる：JavaScript） by junpei (@junpei-sugiyama)
on CodePen.

hover時に色が反転

CSSはこちら。

/* マウスストーカーのスタイル */
.stalker {
  background-color: rgba(28,180,211,.5); /* 背景色 */
  border-radius: 50%; /* 正円 */
  height: 30px; /* 円の高さ */
  left: -15px; /* widthの半分 */
  opacity: 0; /* カーソルを画面内に入れるまでは透明 */
  pointer-events: none; /* 直下のリンクをクリック可能にする */
  position: fixed; /* スクロールしてもカーソルの位置で固定 */
  top: -15px; /* widthの半分 */
  transition: all .3s ease-out; /* 遅れてついてくる時間 */
  width: 30px; /* 円の幅 */
  z-index: 999; /* 一番上に来るように */
}
/* リンクにホバーした時のスタイル */
.stalker.js-hover {
  background-color: #fff; /* 色を反転させるのに必要 */
  height: 50px; /* カーソルがリンク上に乗ったときの高さ */
  left: -25px; /* 円の幅の半分 */
  mix-blend-mode: difference; /* 色を反転 */
  top: -25px; /* 円の高さの半分 */
  width: 50px; /* カーソルがリンク上に乗ったときの幅 */
}
html,
body {
  background-color: #fff; /* 色を反転させるのに必要 */
}

先ほどのhover時に大きくなるマウスストーカーを元にしていますが、CSSの違いは以下になります。

/* リンクにホバーした時のスタイル */
.stalker.js-hover {
  background-color: #fff; /* 色を反転させるのに必要 */
  mix-blend-mode: difference; /* 色を反転 */
}

また、反転させたい要素にも、background-colorは書きましょう。

jQueryは、先ほどのhover時に大きくなるマウスストーカーと同じですが、("a")は("a, .box")に修正して下さい。

デモはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

JavaScriptも、先ほどのhover時に大きくなるマウスストーカーと同じですが、("a")は("a, .box")に修正して下さい。

デモはこちら。

See the Pen
マウスストーカー（hover時に色が反転：JavaScript） by junpei (@junpei-sugiyama)
on CodePen.

画像

画像の場合は、HTMLはこうします。

<div class="stalker" id="js-stalker">
  <img src="画像パス" alt="" />
</div>

CSSは今までで一番簡単です。

/* マウスストーカーのスタイル */
.stalker {
  height: 80px; /* 画像の高さ */
  left: -40px; /* widthの半分 */
  opacity: 0; /* カーソルを画面内に入れるまでは透明 */
  pointer-events: none; /* 直下のリンクをクリック可能にする */
  position: fixed; /* スクロールしてもカーソルの位置で固定 */
  top: -40px; /* widthの半分 */
  transition: transform .3s ease-out; /* 遅れてついてくる時間 */
  width: 80px; /* 画像の幅 */
  z-index: 999; /* 一番上に来るように */
}
/* 画像サイズの調整 */
img {
  width: 100%;
}

画像にしているので、background-colorやborder-radiusは不要です。

jQueryは、通常のマウスストーカーと同じです。

デモはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

JavaScriptの場合はこちら。

document.addEventListener("DOMContentLoaded", function () {
  const stalker = document.getElementById("js-stalker");
  document.addEventListener("mousemove", function (e) {
    // マウスの座標を取得
    const x = e.clientX;
    const y = e.clientY;
    // ストーカーの位置を更新
    stalker.style.opacity = "1"; // カーソルが画面内に入ったら不透明にする
    stalker.style.transform = "translate(" + x + "px, " + y + "px)"; // マウスの座標に移動
  });
});

デモはこちら。

See the Pen
マウスストーカー（画像：JavaScript） by junpei (@junpei-sugiyama)
on CodePen.