jQuery Web制作 JavaScript

マウスカーソルを追従するマウスストーカーの作り方【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を使った本体の読み込み方についても分かりやすく解説
【初心者向け】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; /* 一番上に来るように */
}

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

  • lefttopheightwidthの半分(カーソルの位置を円の中心にするため)
  • 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をあてるのが『transformheightwidth』とあるからです。

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-colorborder-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.

まとめ

今回は、5種類のマウスストーカーの作り方を解説してきました。

個人的には邪魔だなぁと思いますが、実務であれば実装できるようにしておかなくてはならないので、覚えておくといいでしょう。

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-jQuery, Web制作, JavaScript