本文へ移動

§16-11Motion

Cursor follower

マウスカーソルに追従する装飾要素を表示する。

ポインタの動きに反応する演出で、サイトの印象や遊び心を作る。ランディングページやポートフォリオなど、見せることが目的の画面で使う。

実装のポイント

座標は currentTarget 基準で計算し、追従要素自体は pointer-events: none にする。遅れて付いてくる円は transition より rAF の補間のほうが滑らかに制御できる。

特徴
  • アニメーション
デモで使っているもの
  • motion
  • requestAnimationFrame
  • Pointer Events