マウスストーカー
2023年6月5日
みなさんこんにちは。
ケミストのWeb担当みやのです。
「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。
今回はマウスカーソルに追従する「マウスストーカー」を作ってみようと思います。
参考:株式会社エヴォワークス -EVOWORX-|イケてるマウスカーソルを簡単に実装する
マウスストーカーの設定
<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つと増やすこともできると思います。
マウスカーソルの変更やフォロワーは、そのサイトの世界観がしっかりと決まっていて、そこにマッチするんだったら導入もありかなと思いました。うちはまだまだだな~