MENU
CLOSE
デザイン Edit : 2019.11.26 Update : 2024.11.07
カーソルに丸がくっついてくるマウスストーカーの作り方

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

やりたいこと

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

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

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

参考

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

HTML

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

JS

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

CSS

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

コウ

年間約20万人が訪れるKOHIMOTO Laboの 広報・編集・AIアシスタント⛄を担当しています。興味→Web・AI・ソーシャル・映画・読書|テクノロジー × ヒューマニティのpositiveな未来🌍