マウスストーカー

Web

2023年6月5日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回はマウスカーソルに追従する「マウスストーカー」を作ってみようと思います。

参考：株式会社エヴォワークス -EVOWORX-｜イケてるマウスカーソルを簡単に実装する

参考：ウィルラボ｜マウスストーカーのサンプル集

・マウスストーカーの設定

・GreenSockのGSAPのTweenMax

・まとめ

マウスストーカーの設定

<body>の直下に<div>タグを2つ設置して、クラスをそれぞれcursor、followerとしておきます。

<div class="cursor"></div>
<div class="follower"></div>

うん、やっぱり「ストーカー」呼ばわりはよくないですね。今度からフォロワーと呼ぼう。

デフォルトのカーソルを非表示にします。

html, body, a, button, input[type=checkbox] {
  cursor: none;
}

カーソルとフォロワーのCSSを設定します。

.cursor, .follower {
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.cursor {
  width: 8px;
  height: 8px;
  background-color: #000;
  z-index: 10000;
}

.follower {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: rgba(118, 255, 3, 0.5);
  z-index: 9999;
  transition: transform ease 0.1s;
  text-align: center;
}

.follower span {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  transform: scale(0);
}

.follower.is-active {
  transform: scale(3);
}

ホバー時の追加クラス.is-activeも設定しておきます。

いつぞやのA.T.フィールドの時もそうだったのですが、画面右端付近をタッチすると要素がはみ出してしまって、横スクロールバーが出てきてうっとうしいので、<html>と<body>に対してoverflow-x:hiddenを設定しておきます。

それでもスマホだと横スクロールバーが出てしまうので、<body>の中身をすべてoverflow-x:hiddenを適用した<div>タグで囲ってしまいます。

html {
  height: 100%;
  overflow-x: hidden;
}
				
body {
  position: relative;
  overflow-x: hidden;
}

<body>
  <div style="overflow-x: hidden;">
  
    <div class="cursor"></div>
    <div class="follower"></div>
      ・
      ・
      ・
  </div>
</body>

とりあえずこれで準備OKです。

GreenSockのGSAPのTweenMax

ここから先はよくわかってないのでこれから勉強します！

まずはCDNでTweenMaxを呼び出しておきます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js"></script>

以下のスクリプトを記述します。

var
cursor = $(".cursor"),
follower = $(".follower"),
cWidth = 8,
fWidth = 40,
delay = 10,
mouseX = 0,
mouseY = 0,
posX = 0,
posY = 0;

TweenMax.to({}, .001, {
  repeat: -1,
  onRepeat: function() {
    posX += (mouseX - posX) / delay;
    posY += (mouseY - posY) / delay;
    
    TweenMax.set(follower, {
      css: {    
        left: posX - (fWidth / 2),
        top: posY - (fWidth / 2)
      }
    });
    
    TweenMax.set(cursor, {
      css: {    
        left: mouseX - (cWidth / 2),
        top: mouseY - (cWidth / 2)
      }
    });
  }
});

$(document).on("mousemove", function(e) {
  mouseX = e.pageX;
  mouseY = e.pageY;
});

$("a,button,input,label").on({
  "mouseenter": function() {
    cursor.addClass("is-active");
    follower.addClass("is-active");
  },
  "mouseleave": function() {
    cursor.removeClass("is-active");
    follower.removeClass("is-active");
  }
});

GreenSockという会社の作ったGSAP（GreenSock Animation Platform）というプラットフォームの中のTweenMaxというライブラリを使っているそうです。

まとめ

フォロワーを2つ、3つと増やすこともできると思います。

マウスカーソルの変更やフォロワーは、そのサイトの世界観がしっかりと決まっていて、そこにマッチするんだったら導入もありかなと思いました。うちはまだまだだな～

この記事を書いた人

みやの

Web・DTP担当

We Bl●g Webl●g