カーソル追従粒子トレイル
マウスを動かすたびに小さな円がカーソルの後を線状に追いかける、JavaScript ベースのトレイルエフェクトです。 mousemove イベントが発火するたびに span 要素を生成してポインタ座標に配置し、CSS の @keyframes で 0.8 秒かけて縮小・透過させたあと setTimeout で DO…
解説
マウスを動かすたびに小さな円がカーソルの後を線状に追いかける、JavaScript ベースのトレイルエフェクトです。mousemove イベントが発火するたびに span 要素を生成してポインタ座標に配置し、CSS の @keyframes で 0.8 秒かけて縮小・透過させたあと setTimeout で DOM から削除します。粒子の重なりは mix-blend-mode:screen で光が混ざるように発色させているのが特徴です。
使いどころ
- ブランドサイトやポートフォリオのヒーローで、操作の楽しさを演出したいとき
- 暗い背景の作品紹介ページで、視線をカーソルに引き寄せたいとき
- イベントやキャンペーンの特設ページのアクセント
色は background の値を、軌跡の長さは生成間隔と削除までの時間で調整できます。連続生成は要素数が増えてモバイルでは負荷になりやすいため、cursor:none でネイティブカーソルを隠す指定はタッチ端末では外す配慮が要ります。動きが苦手なユーザー向けに prefers-reduced-motion で生成を止めると親切です。
使用例・適したシーン
- クリエイティブポートフォリオ
- アートディレクション系
- ブランドサイト
よくある質問
色や粒子のサイズを変えるには？
粒子の見た目は .ct-dot クラスで決まります。色は background の値、大きさは width と height を変更します。サイズを変えたら left と top のオフセット（現在は中心合わせの -4px）も半分の値に合わせると、カーソルの真下に来ます。
JavaScript なしでも実現できますか？
このトレイルは座標に合わせて要素を動的に生成するため JavaScript が必須です。CSS だけでは実現できません。ただし生成処理は数行で、外部ライブラリは不要です。