ホバープレビュー — 動きの伝え方辞典

hover

hover preview / link image preview

ホバープレビュー

リンクにホバーすると、その先の画像プレビューがカーソルに付いてくる動き。ワークス一覧や記事リストで「クリックする前に中身を見せる」ポートフォリオ定番。lerp追従の粘りと出現のscaleで質感が決まる。

01 — Demo video

Play live →

02 — Prompt template

リンク一覧に hover preview を実装してください。

- 各リンクにホバーすると、対応する画像プレビュー(1枚)がカーソル位置に表示される
- プレビューの位置は毎フレーム lerp(係数 {{lerp}})で補間し、カーソルに遅れて付いてくる質感にする
- 出現は opacity 0→1 と scale {{scaleFrom}}→1 を {{duration}}s の ease-out で同時に行う
- リンクを離れたら同じ duration でフェードアウトする
- ホバー開始時は位置を即座にカーソルへスナップする(画面の隅から飛んでこないように)
- 移動は left/top ではなく transform: translate で行う(リフローさせない)
- プレビューは pointer-events: none にしてリンクのクリックを妨げない
- prefers-reduced-motion 時は追従・scaleを止め、カーソル位置にフェードなしで表示する

リンク一覧に hover preview を実装してください。

- 各リンクにホバーすると、対応する画像プレビュー(1枚)がカーソル位置に表示される
- プレビューの位置は毎フレーム lerp(係数 {{lerp}})で補間し、カーソルに遅れて付いてくる質感にする
- 出現は opacity 0→1 と scale {{scaleFrom}}→1 を {{duration}}s の ease-out で同時に行う
- リンクを離れたら同じ duration でフェードアウトする
- ホバー開始時は位置を即座にカーソルへスナップする(画面の隅から飛んでこないように)
- 移動は left/top ではなく transform: translate で行う(リフローさせない)
- プレビューは pointer-events: none にしてリンクのクリックを妨げない
- prefers-reduced-motion 時は追従・scaleを止め、カーソル位置にフェードなしで表示する

リンク一覧に hover preview を実装してください。

- 各リンクにホバーすると、対応する画像プレビュー(1枚)がカーソル位置に表示される
- プレビューの位置は毎フレーム lerp(係数 {{lerp}})で補間し、カーソルに遅れて付いてくる質感にする
- 出現は opacity 0→1 と scale {{scaleFrom}}→1 を {{duration}}s の ease-out で同時に行う
- リンクを離れたら同じ duration でフェードアウトする
- ホバー開始時は位置を即座にカーソルへスナップする(画面の隅から飛んでこないように)
- 移動は left/top ではなく transform: translate で行う(リフローさせない)
- プレビューは pointer-events: none にしてリンクのクリックを妨げない
- prefers-reduced-motion 時は追従・scaleを止め、カーソル位置にフェードなしで表示する

03 — Params

lerp(追従の粘り) — 範囲 0.03〜0.5 / 初期 0.12
小さいほどカーソルに遅れて「ぬるっと」付いてくる。0.1〜0.15が上品。
duration(出現時間 s) — 範囲 0.15〜0.8 / 初期 0.3
プレビューがフェード＋scaleで現れる時間。0.25〜0.35sが自然。
scaleFrom(出現開始スケール) — 範囲 0.4〜1 / 初期 0.8
出現時にこのscaleから1へ拡大する。0.8前後だと控えめに「ふわっと」出る。

04 — Vocab

lerp — 線形補間。毎フレーム目標位置に少しずつ近づける計算。カーソルに「遅れて付いてくる」質感の正体。
pointer-events: none — 要素をクリック・ホバーの対象外にする指定。プレビューが下のリンクを塞がないために必須。
スナップ — ホバー開始の瞬間だけ補間せず位置を一致させる処理。これがないと前回の位置から画像が飛んでくる。
image trailとの違い — trailは動きに合わせて残像を何枚も撒く。previewは1枚だけが追従し続ける。似て非なる動き。

05 — NG → OK examples

言い方: 「「リンクにホバーしたら画像がカーソルについてくるやつやって」」

なぜNG: 追従の粘りも出現の仕方も未定義。カーソルにベッタリ張り付く硬い実装や、left/topを直接動かすカクつく実装が返ってくる。ホバー開始時のスナップ処理が抜けて画像が画面端から飛んでくる事故も定番。

言い方: 「「hover previewを実装。translateをlerp 0.12で補間、出現はopacity+scale 0.8→1を0.3s ease-out、enter時は位置スナップ、pointer-events: none」」

なぜOK: 追従方式(lerp)・出現アニメーション・初期位置の扱い・クリック阻害の回避まで指定。この4点が揃うと一発でポートフォリオ品質になる。