39. 昔ながらのマウス位置に追従する要素。実はウザい！

マウス追従アニメーションって、最初は「かっこいい！」と思って付けがちなんですが、作り方を間違えると一気に“ウザい”挙動になります。自分が実装したときにハマったポイントと、#follower（小さな円）が滑らかに付いてくるためのコツをまとめます。 まず基本は、マウス座標を取得して要素を動かすだけです。JavaScriptでmousemove（またはpointermove）で座標を取り、#followerのtransform: translate() に反映します。ただしmousemoveで毎回styleを書き換えると負荷が上がり、環境によってはカクつきます。自分は「最新座標だけ変数に入れる→requestAnimationFrameで描画する」に変えたらかなり滑らかになりました。 滑らかさを出す方法は2つあります。 1つ目はCSS側でtransitionを使う方法。#followerに transition: transform 0.1s linear; のように付けると手軽に“追従っぽさ”が出ます。ただ、速く動かすと遅延が目立って逆に邪魔になることも。 2つ目はJavaScriptで補間する方法です。現在位置（cx, cy）を持っておいて、目標（tx, ty）に対して cx += (tx - cx) * 0.15; みたいに近づけると自然な追従になります。追従係数（0.1〜0.25くらい）を調整すると、ヌルヌル〜キビキビまで変えられます。 「ウザさ」を減らすのはここが重要でした。 ・クリックできないように #follower { pointer-events: none; } を必ず付ける（リンクの上で邪魔しない） ・z-indexは上げすぎない（UIより前に出すと不快） ・サイズは小さめ、透明度（opacity）も下げる ・常時表示ではなく、PCだけ有効にする（hoverできない端末では不要） 実装の細かい注意点として、座標はclientX/clientYを使うと「画面（ビューポート）」基準で取りやすいです。スクロール込みにしたい場合はpageX/pageYにするか、fixed配置に合わせて選びます。自分は #follower を position: fixed; にして clientX/clientY に合わせるのが一番ラクでした。 最後に、アクセシビリティも意外と大事です。動きが苦手な人向けに、prefers-reduced-motion: reduce のときは追従をオフにするか、アニメーションを弱めるとGoogle的にも安心です。 このあたりを押さえると、「マウス 追従 アニメーション」で探している人が期待する“滑らかで邪魔にならない follower”にかなり近づきます。