マウスカーソルについてくる「マウスストーカー」の作り方とサンプル色々
2020.02.20 Posted by Coding_team
こんにちは、ウェブラボクリエイターズメモです。
ネットサーフィンをしていると稀に見かける、マウスカーソルからキラキラが降り注いだり、マウスカーソルに何かがついてきたりするやつ。いわゆる「マウスストーカー」。
サイトのデザインにアイデンティティを持たせるだけでなく、マウスカーソルの見失い防止や、押せるボタンの強調などにも役立ちます！
マウスカーソルのカスタマイズやマウスストーカーの作り方を4種類ご紹介します。
1.マウスカーソルの変更
マウスカーソルを、矢印ではなく画像など別の要素に置き換えます。
DEMOをご覧ください。aタグホバー時に強調したりすることもできます。
DEMO
必要なHTML
|
1 2 3 4 5 6 |
<body> <!--body直下にカーソルとなる要素を配置--> <p id="cursor"><img src="_img/img_mark_nikukyu.png" alt="肉球"></p> <!--↓contents↓--> </body> |
カーソルの代わりとなる要素をbody直下に配置してください。
必要なCSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/*マウスカーソルの変更*/ body{ position: relative; cursor: none;/*本物のカーソルを非表示に*/ } body a:hover{ cursor: none;/*aタグホバーのカーソルも非表示に*/ } #cursor{ position: fixed; width: 40px; height: 40px; margin: -20px 0 0 -20px;/*半分引いてカーソル先端に画像中心位置が来るように*/ z-index: 2;/*一番手前に来るように*/ pointer-events: none;/*【重要】マウス直下に常に画像があるので、全てをクリックできなくなる。noneにして対応*/ transition: transform 0.1s; opacity: 0;/*開いた瞬間非表示*/ } #cursor.active{ transform: scale(1.8); } |
4行目でページ全体でのcursorを非表示にします。
ここで、カーソル位置の最前面に常に要素があるということは、どこもクリックできなくなってしまうということなので、17行目でpointer-events:noneを指定する必要があります。
後述するjQueryで、aタグホバー時にactiveクラスを付与します。23行目にその際カーソル要素を拡大する記述をしています。
必要なjQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
$(function(){ //マウスカーソルの変更 //================================= //カーソル要素 var cursor=$("#cursor"); //mousemoveイベントでカーソル要素を移動 $(document).on("mousemove",function(e){ //マウス位置を取得するプロパティ var x=e.clientX; var y=e.clientY; //カーソル要素のcssを書き換え。重複しなければtransformを使うのがおすすめ cursor.css({ "opacity":"1", "top":y+"px", "left":x+"px" }); }); //aタグホバー $("a").on({ "mouseenter": function() { //activeクラス付与 cursor.addClass("active"); }, "mouseleave": function() { cursor.removeClass("active"); } }); }); |
10、11行目でカーソルの座標位置を取得し、
13～17行目でカーソル要素のcssに代入しています。
今回はaタグホバーでカーソル要素にtransformを使用したかったので、ここではtopとleftを書き換えています。
2.遅れてついてくるマウスストーカー
マウスストーカーに遅れてついてくるストーカー要素を追加します。
DEMO
必要なHTML
|
1 2 3 4 5 6 7 |
<body> <!--body直下にカーソルとなる要素を配置--> <p id="cursor"><img src="_img/img_mark_nikukyu.png" alt="肉球"></p> <!--body直下にマウスストーカーとなる要素を配置--> <div id="stalker"></div> <!--↓contents↓--> </body> |
マウスカーソルとなる要素と別に、ストーカーとなる要素をbody直下に配置します。
必要なCSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
/*ちょっと遅れてくるマウスストーカー*/ body{ position: relative; cursor: none;/*本物のカーソルを非表示に*/ } body a:hover{ cursor: none;/*aタグホバーのカーソルも非表示に*/ } /*カーソル*/ #cursor{ position: fixed; width: 40px; height: 40px; margin: -20px 0 0 -20px;/*半分引いてカーソル先端に画像中心位置が来るように*/ z-index: 3;/*一番手前に来るように*/ pointer-events: none;/*【重要】マウス直下に常に画像があるので、全てをクリックできなくなる。noneにして対応*/ transition: transform 0.1s; opacity: 0;/*開いた瞬間非表示*/ } #cursor.active{ transform: scale(1.8); } /*ストーカー要素*/ #stalker{ position: fixed; width: 60px; height: 60px; z-index: 2;/*一番手前に来るように*/ pointer-events: none;/*【重要】マウス直下に常に画像があるので、全てをクリックできなくなる。noneにして対応*/ background: url(../_img/img_pet_cat_oddeye_black.png) 50% 50% no-repeat; background-size: contain; opacity: 0;/*開いた瞬間非表示*/ } #stalker.active{ background: url(../_img/img_pet_cat_oddeye.png) 50% 50% no-repeat; background-size: contain; } |
カーソル要素については1と同じポイントに注意してください。
33行目で、ストーカー要素についてもクリック無効化しています。
必要なjQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
$(function(){ //ちょっと遅れてくるマウスストーカー //================================= //カーソル要素 var cursor=$("#cursor"); //ちょっと遅れてくる要素 var stalker=$("#stalker"); //mousemoveイベントでカーソル要素を移動 $(document).on("mousemove",function(e){ //マウス位置を取得するプロパティ var x=e.clientX; var y=e.clientY; //カーソル要素のcssを書き換え。重複しなければtransformを使うのがおすすめ cursor.css({ "opacity":"1", "top":y+"px", "left":x+"px" }); //ちょっと遅れて要素のcssを書き換え setTimeout(function(){ stalker.css({ "opacity":"1", "transform":"translate("+x+"px,"+y+"px)" }); },100); }); //aタグホバー $("a").on({ "mouseenter": function() { //activeクラス付与 cursor.addClass("active"); stalker.addClass("active"); }, "mouseleave": function() { cursor.removeClass("active"); stalker.removeClass("active"); } }); }); |
24～29行目でsetTimeoutを使い、マウスを動かした0.1秒後にストーカー要素のcssを書き換えています。
3.速く動かすとデカくなるマウスストーカー
単位あたりの移動距離を計算し、cssの値として使用します。
今回はtransform scaleの値とすることにより速いとデカくなります。ネタ枠で作りましたが、他にもカラーコードを変更したり、意外と応用できそうです。
DEMO
必要なHTML
|
1 2 3 4 5 6 |
<body> <!--body直下にカーソルとなる要素を配置--> <p id="cursor"><img src="_img/img_mark_nikukyu.png" alt="肉球"></p> <!--↓contents↓--> </body> |
1と同様です。
必要なCSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/*速いとデカくなるマウスストーカー*/ body{ position: relative; cursor: none;/*本物のカーソルを非表示に*/ } body a:hover{ cursor: none;/*aタグホバーのカーソルも非表示に*/ } #cursor{ position: fixed; width: 60px; height: 60px; margin: -30px 0 0 -30px;/*半分引いてカーソル先端に画像中心位置が来るように*/ z-index: 2;/*一番手前に来るように*/ pointer-events: none;/*【重要】マウス直下に常に画像があるので、全てをクリックできなくなる。noneにして対応*/ background: url(../_img/img_pet_cat_oddeye_black.png) 50% 50% no-repeat; background-size: contain; opacity: 0;/*開いた瞬間非表示*/ } #cursor.active{ background: url(../_img/img_mark_nikukyu.png) 50% 50% no-repeat; background-size: contain; } |
1と同様です。
必要なjQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
$(function(){ //速く動かすとデカくなるマウスストーカー //================================= //カーソル要素 var cursor=$("#cursor"); //xy座標 var x=0; var y=0; //拡大倍率 var scale=1; //mousemoveイベントでカーソル要素を移動 $(document).on("mousemove",function(e){ //移動後のxy座標 var newX=e.clientX; var newY=e.clientY; //移動量に対する拡大倍率 var newScale=(1+Math.abs((newX+newY)-(x+y))*0.05); //滑らかにするため、移動前の拡大倍率との平均を取る scale=(newScale+scale)/2; //ここでマウス位置を更新 x=newX; y=newY; //カーソル要素のcssを書き換え。 cursor.css({ "opacity":"1", "transform":"translate("+x+"px,"+y+"px) scale("+scale+")" }); }); //aタグホバーで何かしたいとき $("a").on({ "mouseenter": function() { //activeクラス付与 cursor.addClass("active"); }, "mouseleave": function() { cursor.removeClass("active"); } }); }); |
少し複雑です。
移動前の座標を残したいので、座標用の変数x、yはグローバルに宣言します。
16、17行目で移動後の座標位置をnewX、newYとし、
19行目で移動前との差を出します。その際に、カーソルを左から右へ移動した場合はいいのですが、右から左へ移動した場合に差がマイナスになってしまうため、Math.absで差の絶対値としています。
一通り欲しい値を出し終わったら、23、24行目でグローバル変数を更新しています。
4.キラキラ降りそそぐマウスストーカー
DEMO
本当はもっと小さくてキラキラした要素を降り注がせるのですが、DEMOを見ていただいたら分かる通りここまで猫で来てしまったので、ここでは中くらいの肉球を降り注がせます。
必要なHTML
|
1 2 3 |
<body> <!--↓contents↓--> </body> |
jQueryで要素を出力するため、特に必要ありません。
必要なCSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/*キラキラ降りそそぐマウスストーカー*/ .shine{ position: fixed; top: -15px; left: -15px; width: 30px; height: 30px; background: url(../_img/img_mark_nikukyu.png) 50% 50% no-repeat; background-size: contain; z-index: 2; animation: shine 2s ease-out 0s forwards; } @keyframes shine{ 0%{ transform: translateY(0) rotate(-5deg); opacity: 0; } 5%{ opacity: 1; } 80%{ opacity: 1; } 100%{ transform: translateY(50px) rotate(5deg); opacity: 0; } } |
shineというクラス名の要素を出力していきます。
クラス名は適宜変更していただいて構いませんが、たくさん出るのでidは使わないでくださいね。また、降りそそぐ動きはCSSのkeyframesで定義しています。
ここでは2秒かけて少し回転しながら50px下に移動、opacityでふわっと感を演出しています。
必要なjQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
$(function(){ //キラキラ降りそそぐマウスストーカー //================================= var body=$("body"); //キラキラ頻度調整用フラッグ var flag=true; //mousemoveイベントでカーソル要素を移動 $(document).on("mousemove",function(e){ if(flag){ //マウス位置を取得するプロパティ var x=e.clientX; var y=e.clientY; //キラキラ要素生成 var shine=$("<p>").attr("class","shine"); shine.css({ "top":y+"px", "left":x+"px" }); //body直後に配置 body.prepend(shine); //2秒後に削除 setTimeout(function(){ shine.remove(); },2000); //一旦新しい要素生成をストップ flag=false; //0.1s後に解除 setTimeout(function(){ flag=true; },100); } }); }); |
17行目で新しくpタグの要素を生成し、
18行目で初期のtop、left値を設定し、
23行目でbodyタグ直後に挿入しています。
25行目で2秒後にpタグ要素を削除しています。cssのanimationに合わせて時間を調整してください。
また、それだけだと要素が出すぎてしまうので、
30～34行目で要素を出した瞬間から0.1秒間は要素を生成しないようにしています。
おわりに
どうでしたか？
がむしゃらに使っては鬱陶しくなってしまうだけですが、うまく取り入れてサイトにアクセントを加えてみてください！
以上、ウェブラボクリエイターズメモでした。
関連記事こちらの記事も合わせてどうぞ。
