Webデザイナーの平尾誠です。
PC表示の際に、マウスポインターを利用してユーザーの体験を新しくするサイトが増えています。
ユーザーの体験をよりリッチに表現してくれます。
こんな感じですね。
自分もポートフォリオで実装したいと思ったのでたくさん探しました。
マウスストーカーの作り方まとめ
See the Pen
Mouse Stoker by masayuki yamada (@yamada-evoworx)
on CodePen.
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.
まとめ
これが実装なかなか難しいんですよね。
もともと備えられたブラウザの挙動を変更するには、使いやすくするための工夫が必要です。
- マウスオーバーで何かアクションが必要
- 横スクロールのサイトで縦にポインターが動く
- マウスダウンの時にアニメーションをつけるとわかりやすい
このあたりを注意して置くと実装がラクになるかも
ほなね