カーソルに丸がくっついてくるマウスストーカーの作り方

やりたいこと

 
このページに実装しているような、以下項目を網羅するマウスストーカーを作る。

・マウスの動きに合わせて要素がくっついてくる
・マウスホイールの動きに合わせてスクロールしても要素がくっついてくる
・aタグにホバーすると要素の大きさを変更できる

一番簡単かつ、最終的に満足いく挙動を実装できた方法を記載します。

参考

https://codepen.io/jm4works/pen/oJqjaG

HTML

bodyタグの直下などに、ポインター用のdivを配置

JS

 
・opacityの設定で、丸の透明度を変更できます。
・hoverSize: 0.5にすることで、aタグにhoverした際に丸が小さくなるよう設定しています。値によって小さくしたり大きくしたりすることが可能です。

CSS

 
・その他形の変更などは、CSSで設定してください。
 

できた!!