方向連動ホバー — 動きの伝え方辞典

hover

directional-aware hover

方向連動ホバー

カーソルが入った辺から塗り(オーバーレイ)が流れ込み、出た辺へ引いていくホバー。上下左右どの辺から入ったかを判定するのが肝で、固定方向のフィルより「触った感」が段違いに出る。カード・ナビ・CTAで定番。

01 — Demo video

Play live →

02 — Prompt template

カード/ボタンに directional-aware hover(方向連動ホバー)を実装してください。

- 要素を position: relative + overflow: hidden にし、内側に塗り用オーバーレイ(::before か子要素)を敷く
- mouseenter で getBoundingClientRect からカーソルと上下左右4辺の距離を求め、最も近い辺を「入った辺」とする
- 入った辺の外側にオーバーレイを translate で退避させてから、transform: translate(0,0) へ {{duration}}s の ease-out で流し込む
- mouseleave 時は leaveMode={{leaveMode}} に従う(出た辺へ引く / 入った辺へ戻す)。同じ {{duration}}s で退避方向へ translate する
- 動かすのは transform のみ(top/left や width ではなくtranslateXYで、リフローさせない)
- テキストは z-index でオーバーレイより上に置き、必要なら mix-blend-mode: difference で塗りに対して自動反転させる
- タッチデバイスでは辺判定ができないので、tap で中央からのフェードにフォールバックする
- prefers-reduced-motion 時はスライドを無効化し、色の即時切り替え(または薄い定常オーバーレイ)にする

カード/ボタンに directional-aware hover(方向連動ホバー)を実装してください。

- 要素を position: relative + overflow: hidden にし、内側に塗り用オーバーレイ(::before か子要素)を敷く
- mouseenter で getBoundingClientRect からカーソルと上下左右4辺の距離を求め、最も近い辺を「入った辺」とする
- 入った辺の外側にオーバーレイを translate で退避させてから、transform: translate(0,0) へ {{duration}}s の ease-out で流し込む
- mouseleave 時は leaveMode={{leaveMode}} に従う(出た辺へ引く / 入った辺へ戻す)。同じ {{duration}}s で退避方向へ translate する
- 動かすのは transform のみ(top/left や width ではなくtranslateXYで、リフローさせない)
- テキストは z-index でオーバーレイより上に置き、必要なら mix-blend-mode: difference で塗りに対して自動反転させる
- タッチデバイスでは辺判定ができないので、tap で中央からのフェードにフォールバックする
- prefers-reduced-motion 時はスライドを無効化し、色の即時切り替え(または薄い定常オーバーレイ)にする

カード/ボタンに directional-aware hover(方向連動ホバー)を実装してください。

- 要素を position: relative + overflow: hidden にし、内側に塗り用オーバーレイ(::before か子要素)を敷く
- mouseenter で getBoundingClientRect からカーソルと上下左右4辺の距離を求め、最も近い辺を「入った辺」とする
- 入った辺の外側にオーバーレイを translate で退避させてから、transform: translate(0,0) へ {{duration}}s の ease-out で流し込む
- mouseleave 時は leaveMode={{leaveMode}} に従う(出た辺へ引く / 入った辺へ戻す)。同じ {{duration}}s で退避方向へ translate する
- 動かすのは transform のみ(top/left や width ではなくtranslateXYで、リフローさせない)
- テキストは z-index でオーバーレイより上に置き、必要なら mix-blend-mode: difference で塗りに対して自動反転させる
- タッチデバイスでは辺判定ができないので、tap で中央からのフェードにフォールバックする
- prefers-reduced-motion 時はスライドを無効化し、色の即時切り替え(または薄い定常オーバーレイ)にする

03 — Params

duration(流れ込む時間 s) — 範囲 0.2〜0.7 / 初期 0.4
0.35〜0.45sが自然。速いほどキレが出るが、0.25sを切ると方向が読み取れなくなる。
leaveMode(離脱時の引き方) — 選択: 出た辺へ引く / 入った辺へ戻す（初期: 出た辺へ引く）
マウスが離れたとき塗りをどこへ逃がすか。「出た辺へ引く」が最も自然で、動きに一貫性が出る。

04 — Vocab

directional-aware — カーソルの進入方向を検知して動きの向きを変える考え方。Codropsの古典デモで広まった呼び名。
getBoundingClientRect — 要素の画面上の矩形(位置とサイズ)を返すAPI。カーソル座標との差から4辺のどれに近いかを算出する。
オーバーレイ退避 — 塗りレイヤーを入った辺の外にtranslateで一旦逃がしておくこと。そこから0へ動かすと「その辺から流れ込む」ように見える。
mix-blend-mode: difference — 塗りの色に応じて前面テキストの色を自動反転させる合成モード。文字色の手動切替を省ける。

05 — NG → OK examples

言い方: 「「ホバーでカードに色がスッと入るようにして」」

なぜNG: 「スッと」では方向が決まらない。transform-origin固定のフィルや background-color の単純transitionが返り、どこから触っても同じ動きになって“方向連動”の気持ちよさが消える。

言い方: 「「directional-aware hoverを実装。mouseenterでrectから最も近い辺を判定し、その辺の外へ退避させたオーバーレイをtranslateで0へ0.4s ease-out。leaveは出た辺へ引く。transformのみでリフロー禁止、テキストはdifferenceで反転」」

なぜOK: 辺判定のロジック・退避と流し込みの方式・離脱方向・パフォーマンス制約まで指定。「最も近い辺」の一語で固定方向フィルとの差(=この技法の本体)が確定する。