マウスカーソルを利用したマウスストーカー好例まとめ

Webデザイナーの平尾誠です。
PC表示の際に、マウスポインターを利用してユーザーの体験を新しくするサイトが増えています。
ユーザーの体験をよりリッチに表現してくれます。

こんな感じですね。
自分もポートフォリオで実装したいと思ったのでたくさん探しました。

マウスストーカーの作り方まとめ

See the Pen Custom cursor with GSAP TweenMax and CSS by Karlo Videk (@karlovidek) on CodePen.

See the Pen Circle cursor with blend mode by Clement Girault (@clementGir) on CodePen.

See the Pen Custom Dot Cursor by Kyle Brumm (@kjbrum) on CodePen.

See the Pen Ink Cursor by Ricardo Mendieta (@mendieta) on CodePen.

まとめ

これが実装なかなか難しいんですよね。
もともと備えられたブラウザの挙動を変更するには、使いやすくするための工夫が必要です。

  • マウスオーバーで何かアクションが必要
  • 横スクロールのサイトで縦にポインターが動く
  • マウスダウンの時にアニメーションをつけるとわかりやすい

このあたりを注意して置くと実装がラクになるかも

ほなね