💨

調べるだけで使わずに終わった爆速実装マウスストーカーをここで発散する

2022/05/09に公開

「マウスストーカー使うかもしれないからちょっと調べといてね！」
「分かりました！😏」

時々オシャレなサイトで使われている「マウスストーカー」をあるプロジェクトで実装できるかもということでワクワクしながら調べていましたが、結局使用しないということで落ち着いたのでここで発散します。

まだ実装したことない、使う予定ないけど興味あるという方にちょっとでも役に立てれば幸いです。

そもそも、サイトを訪れたユーザーは何に対して興味を惹かれると思いますか？

あたりが思い浮かぶのではないでしょうか。

もちろん人によって感じることは違いますが、上記はユーザーに飽きさせないようにしたい、なるべく長く自分のサイトに留まってもらいたいという目的では共通しています。

中でも、アニメーションは動くたびにユーザーの視点を集めることができるので「楽しんでもらう」という点では優れています。

個人的な好みですがマウスストーカーは結構好きで、採用しているサイトがあるとつい余計にマウスを動かしてしまいます。マウスストーカーは難しそうなイメージがあるかもしれませんが、意外と簡単に実装できます。
こちらで詳しく解説しているので合わせて参考ください。

マウスストーカーって？

マウスストーカーとは字のごとくマウスに何かしらの要素が追従するエフェクトのことを言います。

追従させる他に要素をホバーしたら追従要素を大きくしたり、色を変えたりと自分好みにカスタマイズすることもできます。

今回は生のJavaScript,jQuery,GSAPで調べたので好きなやつをどうぞ。

やっていることは意外とシンプルです。

mousemoveというイベントトリガーはカーソルが動く度に任意の処理を走らせることができます。
これを使って自身のカーソルの動きに応じて、毎回カーソルの位置を取得、要素を動かすということができるようになります。

イベントリスナーに登録したコールバック関数には、イベント発生時の様々な情報が渡されるわけですが、この中にカーソルのX値(横の座標)とY値(縦の座標)も含まれています。

このX値とY値を、追従させたい要素にCSSのtranslateプロパティの値としてセットする事で基本的なマウスストーカーができます。

ただこれだけだとカーソルの動きと同じくカクカクした動きになるのであまりいけてるマウスストーカーとは言えません。

理想なのはヌルッと動いて、まるで生きているような動きをするやつ。

そのためにはcssのtransitionプロパティを使います。

これを使うことで、設定した値分要素が遅れて追従するようになるのでスーッヌルッと動くマウスストーカーを作れます。

以下、jQueryとGSAPも同じ理屈で実装できます。

カーソルも追従要素に合わせたい時。

基本的にはストーカーする要素と原理は同じです。

corsor:none;でデフォルトのカーソルは非表示にできるので、この代わりにhtml,cssを使って要素を作成する流れになります。

追従させたい要素をbody直下に置いて、CSS、JavaScriptのコードをそのままコピペで動くと思います。要素がズレている場合はcssかjavascriptの数値を調整してください！

私の分も素敵なマウスストーカーを作っちゃってください！