MotionLang

フィードバックと操作 · タップへの反応

ホバーで追うプレビュー悬停预览跟随

メニューの名前の上をポインタが通ると、プレビューがポインタの位置から現れて付いてきます。次の名前へ移るとその場で入れ替わり、ポインタを動かせばまた付いてきます。リストから離れると縮んで消えます。

ツールでこの項目を開く

使いどころ

名前だけでは何か分からない場所(ポートフォリオ、商品リスト、目次)に向きます。名前で十分伝わるリストには使わないでください。浮く層が邪魔になり、次の行を隠します。

パラメータ

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

レシピ

  1. ホバーで追うプレビュー → 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 にしてください。

同じカテゴリの動き