フィードバックと操作 · タップへの反応
ホバーで追うプレビュー悬停预览跟随
- 押す前に見える
- 手に付いてくる
- 素早く入れ替わる
メニューの名前の上をポインタが通ると、プレビューがポインタの位置から現れて付いてきます。次の名前へ移るとその場で入れ替わり、ポインタを動かせばまた付いてきます。リストから離れると縮んで消えます。
使いどころ
名前だけでは何か分からない場所(ポートフォリオ、商品リスト、目次)に向きます。名前で十分伝わるリストには使わないでください。浮く層が邪魔になり、次の行を隠します。
パラメータ
preview 196×132 · transform: scale 0 → 1 in 320ms cubic-bezier(.22,1,.36,1) · position lerp 0.12, no easing · swaps content per row
レシピ
ホバーで追うプレビュー → scale 0 → 1 @ 320ms cubic-bezier(.22,1,.36,1)
AI に渡す一文
このリストにホバープレビューを追加してください。ポインタが行に入ったら、その行の画像を position: fixed の容器に入れ、scale 0 から 1 へ 320ms cubic-bezier(.22,1,.36,1) で広げ、位置は lerp 0.12 でポインタを追わせます。行が変わるときは容器は動かさず中身だけ差し替えます。リストから離れたら 0 に縮めます。容器は pointer-events: none にしてください。