§16-11Motion
Cursor follower
マウスカーソルに追従する装飾要素を表示する。
ポインタの動きに反応する演出で、サイトの印象や遊び心を作る。ランディングページやポートフォリオなど、見せることが目的の画面で使う。
実装のポイント
座標は currentTarget 基準で計算し、追従要素自体は pointer-events: none にする。遅れて付いてくる円は transition より rAF の補間のほうが滑らかに制御できる。
- 特徴
- アニメーション
- デモで使っているもの
- motion
- requestAnimationFrame
- Pointer Events