コーディング

【備忘録】マウスカーソルのカスタマイズをしてみた。

  • このエントリーをはてなブックマークに追加

こんにちは!ワタナベです。

今回はマウスカーソルのカスタマイズについて備忘録。

デフォルトだとマウスカーソルは矢印ですが、cssとjsで簡単にカスタマイズすることができます^^

下記自分が作成してみたものです。(PCでご覧ください)

See the Pen
Untitled
by Akiho (@wcaotdaenpaebne)
on CodePen.

マウスカーソルが黒い点になっており、マウスストーカーの円がカーソルの動きに合わせて遅れて追尾してきます。
リンクをホバーすると色と大きさが変わります。(自分は「mix-blend-mode: difference;」も設定しております)

リンク自体にホバー動作はつけておりませんが、マウスカーソル自体に動きがあるためホバー動作未設定でも様になっています(^^♪

カーソルのカスタマイズがされてるとなんだかオシャレですよね。色々カスタマイズして取り入れていきたいなーと思います!

▼THANKS!

 

それではまた次回。

ご閲覧ありがとうございました♪

  • このエントリーをはてなブックマークに追加

建築に特化したホームページで集客&受注へ

実績の99%が建築業界だからわかる、"受注の取れるWebサイト"づくりを行います。
1000サイト以上の制作実績と、豊富なサービス・運営サポートが御社をバックアップ。お気軽にお問い合わせください!

D-Gripシステム Webサイトへ