マウスカーソルについてくる「マウスストーカー」の作り方とサンプル色々

7c4e0d15d3fbca9ee30128ae4eb5059a_sこんにちは、ウェブラボクリエイターズメモです。
ネットサーフィンをしていると稀に見かける、マウスカーソルからキラキラが降り注いだり、マウスカーソルに何かがついてきたりするやつ。いわゆる「マウスストーカー」。
サイトのデザインにアイデンティティを持たせるだけでなく、マウスカーソルの見失い防止や、押せるボタンの強調などにも役立ちます!
マウスカーソルのカスタマイズやマウスストーカーの作り方を4種類ご紹介します。
 

  1. マウスカーソルの変更
  2. 遅れてついてくるマウスストーカー
  3. 速く動かすとデカくなるマウスストーカー
  4. キラキラ降りそそぐマウスストーカー

 

1.マウスカーソルの変更

マウスカーソルを、矢印ではなく画像など別の要素に置き換えます。
DEMOをご覧ください。aタグホバー時に強調したりすることもできます。
 
DEMO
 

必要なHTML

カーソルの代わりとなる要素をbody直下に配置してください。
 

必要なCSS

4行目でページ全体でのcursorを非表示にします。
ここで、カーソル位置の最前面に常に要素があるということは、どこもクリックできなくなってしまうということなので、17行目でpointer-events:noneを指定する必要があります。
後述するjQueryで、aタグホバー時にactiveクラスを付与します。23行目にその際カーソル要素を拡大する記述をしています。
 

必要なjQuery

10、11行目でカーソルの座標位置を取得し、
13~17行目でカーソル要素のcssに代入しています。
今回はaタグホバーでカーソル要素にtransformを使用したかったので、ここではtopとleftを書き換えています。
 

2.遅れてついてくるマウスストーカー

マウスストーカーに遅れてついてくるストーカー要素を追加します。
DEMO
 

必要なHTML

マウスカーソルとなる要素と別に、ストーカーとなる要素をbody直下に配置します。
 

必要なCSS

カーソル要素については1と同じポイントに注意してください。
33行目で、ストーカー要素についてもクリック無効化しています。
 

必要なjQuery

24~29行目でsetTimeoutを使い、マウスを動かした0.1秒後にストーカー要素のcssを書き換えています。
 

3.速く動かすとデカくなるマウスストーカー

単位あたりの移動距離を計算し、cssの値として使用します。
今回はtransform scaleの値とすることにより速いとデカくなります。ネタ枠で作りましたが、他にもカラーコードを変更したり、意外と応用できそうです。
DEMO
 

必要なHTML

1と同様です。
 

必要なCSS

1と同様です。

 

必要なjQuery

少し複雑です。
移動前の座標を残したいので、座標用の変数x、yはグローバルに宣言します。
16、17行目で移動後の座標位置をnewX、newYとし、
19行目で移動前との差を出します。その際に、カーソルを左から右へ移動した場合はいいのですが、右から左へ移動した場合に差がマイナスになってしまうため、Math.absで差の絶対値としています。
一通り欲しい値を出し終わったら、23、24行目でグローバル変数を更新しています。
 

4.キラキラ降りそそぐマウスストーカー

DEMO
本当はもっと小さくてキラキラした要素を降り注がせるのですが、DEMOを見ていただいたら分かる通りここまで猫で来てしまったので、ここでは中くらいの肉球を降り注がせます。
 

必要なHTML

jQueryで要素を出力するため、特に必要ありません。

 

必要なCSS

shineというクラス名の要素を出力していきます。
クラス名は適宜変更していただいて構いませんが、たくさん出るのでidは使わないでくださいね。また、降りそそぐ動きはCSSのkeyframesで定義しています。
ここでは2秒かけて少し回転しながら50px下に移動、opacityでふわっと感を演出しています。

 

必要なjQuery

17行目で新しくpタグの要素を生成し、
18行目で初期のtop、left値を設定し、
23行目でbodyタグ直後に挿入しています。
25行目で2秒後にpタグ要素を削除しています。cssのanimationに合わせて時間を調整してください。
また、それだけだと要素が出すぎてしまうので、
30~34行目で要素を出した瞬間から0.1秒間は要素を生成しないようにしています。

 

おわりに

どうでしたか?
がむしゃらに使っては鬱陶しくなってしまうだけですが、うまく取り入れてサイトにアクセントを加えてみてください!
以上、ウェブラボクリエイターズメモでした。

  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。