カーソル追従ドット
マウスを追って少し遅れて付いてくる、装飾的なカーソルドットです。実装は数行の Vanilla JavaScript で、 mousemove のたびにドットを translate でカーソル座標へ動かしているだけ。
解説
マウスを追って少し遅れて付いてくる、装飾的なカーソルドットです。実装は数行の Vanilla JavaScript で、mousemove のたびにドットを translate でカーソル座標へ動かしているだけ。遅れて滑らかに追従して見えるのは、ドットに transition: transform .12s を入れているためで、座標が変わるたびに 0.12 秒かけて移動し、残像感が生まれます。本体の body に cursor: none を当てて OS のカーソルを隠し、このドットで置き換えています。mix-blend-mode: difference により、明暗どちらの背景でも反転して視認できます。
こんなサイトに
- 個性を出したいポートフォリオやエージェンシーサイト
- 暗めの背景でモダンな雰囲気を演出したい LP
- 遊び心のあるブランドサイトのちょっとした仕掛け
ドットの色や大きさは CSS の background と幅・高さで、追従の重さは transition の秒数で調整でき、秒数を長くするほどゆったり遅れて付いてきます。注意点が二つあります。まず cursor: none で本来のカーソルを消すため、リンクやボタン上で pointer 形状が見えず操作性が下がる恐れがあり、工夫が要ります。次に、演出専用なので必須機能の代わりにはしないことが大切です。
使用例・適したシーン
- 購入完了・サブスク成約画面
- ゲーム要素のあるサイト
- イベント告知
よくある質問
ドットの色や大きさは変えられますか？
CSS の cf-dot の background でドットの色を、width と height で大きさを変更できます。大きさを変えたときは、JavaScript 側で中心に合わせる引き算の値（サンプルでは 12）も半径に合わせて調整すると、カーソルの真ん中にぴったり重なります。
追従の遅れ具合を調整できますか？
cf-dot の transition の秒数（サンプルでは 0.12 秒）を大きくすると、ゆったり遅れて付いてくる重い動きになり、小さくするとカーソルにぴたりと付く機敏な動きになります。残像感を強めたいときは秒数を長めに設定してください。