2021.01.03
- Javascript
マウスカーソルの動きに追従させるマウスストーカーの作り方
普段なにげなく使用しているマウスカーソルもCSSやJavascriptでカスタマイズが可能です。やりようによってはマウスカーソルのかたちを別の画像に置き換えたり、カーソルの動きに追従させるマウスストーカーなどを応用して作れます。
まずはデモページをご覧ください。
https://codepen.io/nyantora_03_09/pen/ExyaBpy
今回はこのブログでも設定しているマウスカーソルのカスタマイズ方法をご紹介します。
HTMLはこちら
<div class="cursor"></div>
<div class="follower c-follower"></div>bodyタグの直下に置くと良いです。
1行目のclass="cursor"が通常のカーソルを加工するもので、2行目のclass="follower"が追従するマウスストーカー用のものになります。そのほかに指定しているclassなどは後にjavascriptなどで制御を加えていくときのもになります。
シンプルにカーソルを好きな画像アイコンなどに変更したい場合は、followerのdivは書かずに、cursorのdiv内にimgタグなどで画像を表示させます。
CSSはこちら
body {
position: relative;
cursor: none;
}
.cursor,
.follower {
border-radius: 50%;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
cursor: none;
}
.cursor {
width: 8px;
height: 8px;
background-color: #1a1a1a;
z-index: 1001;
}
.follower {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background-color: rgba(0,0,0,0.1);
transition: transform ease .1s;
text-align: center;
z-index: 1000;
&.is-active {
transform: scale(2.4);
}
}まず最初にデフォルトのカーソルを非表示にするため、bodyにcursorの記述を加ます。
cursorとfollowerの位置関係も、cursorが上に来るようz-indexで調整します。
このサンプルではカーソルがリンク要素などに触れた際に、追従してくるマウスストーカーを変化させるため、transformのscaleで大きさを調整しています。
カーソルの背景色を濃くしたり広げすぎると、リンクボタンにホバーした際にボタン内のテキストをカーソルが覆い隠してしまうことがあります。そのため、当ブログではfollowerをbackgroundではなくborderに変え、cssでfilterやmix-blend-modeで階調反転させ、背後のボタンテキストも読めるよう調整しています。
JavaScriptはこちら
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.clientX;
mouseY = e.clientY;
});
$("a").on({
"mouseenter": function() {
cursor.addClass("is-active");
follower.addClass("is-active");
},
"mouseleave": function() {
cursor.removeClass("is-active");
follower.removeClass("is-active");
}
});追従のアニメーションにはGreenSockのTweenMaxを使用しているので、あらかじめCDNなどでライブラリを読み込んでおきましょう。
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js"></script>前半のほうで追従カーソルの遅延スピードの設定など行います。
後半ではaタグにhoverした際に変化をつけるために、is-activeのクラス名追加の処理などを行っています。
参考サイト
https://www.evoworx.co.jp/blog/mouse-stoker-gsap/
