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で設定してください。   できた!!

KOHIMOTO LABO

東京・吉祥寺でKOHIMOTO Inc.というWebサイト制作の会社をやっているエンジニアとデザイナーが、発信を通して成長していくためのラボ🧪 IT企業出身。サイト制作を通じて微力ながら社会が良くなる手助けをしたいと思っている。