マウスストーカーを実装しました

やりたかったことの第2弾は「マウスストーカー」。
その名の通り、マウスの動きに合わせて画像が付いてきたりするやつです。

このスマホ時代に不要な演出といえばそれまでなのですが、当サイトではSEOとかトレンドとか気にせず、思い立ったら実装してしまおうと考えております。

当サイトではトップページのみに実装しておりますが、マウスの動きに合わせて背景の十字がくっついてきます。
リンクやボタンにカーソルが重なるとボケて消えます。

もちろん、ダークモードにも対応しており十字のカラーが切り替わるようになってます。

ロゴのテイストでライフルの照準っぽく演出したかっただけなのですが、ネットで探しても理想とする参考サイトに出会えず、思ったよりも困難な道程でした。

いろいろ調べたおかげで、どのサイトを参考にしたかも覚えていないため、Codepenの実験用ソースだけ貼り付けておきます。

CodePen Embed Fallback

ユーザーエージェントで制御しているため、スマホやタブレットでは動作しません。パソコンのみで動作が確認できます。