ホバーエフェクト
カーソルを乗せると表情が変わる。
カーソルを乗せたときの表情の変化を集めたカテゴリ。3Dチルトやスポットライト、光沢スイープのようにカード全体の質感を変える型と、下線スライドや画像ズームのように「ここは押せる」と小さく示す型がある。原則はアフォーダンスとシグニファイア。ホバーの本来の仕事は装飾ではなく、押せる場所を触る前に知らせることで、演出はその副産物にすぎない。なお、ホバーはタッチ端末では存在しない。ホバーでしか出ない情報を作らず、タップやフォーカスでも同じ状態へ到達できるように組む前提で引く。
使い分けテキストリンクは underline-slide、記事カードは image-zoom、暗い背景の高級感は spotlight-card / card-tilt。裏面に情報を持つなら flip-card（タップでも反転する）。custom-cursor と flashlight-reveal はサイト全体の演出なので、1つのページに1つまで。
まず見る3件
- ホバー
3Dチルトカード
3D Tilt Card
カーソルの位置に合わせてカードが立体的に傾く。カード周辺の広い範囲で反応するので、離れた場所からでも動く。
- 反応エリアはカードの 2.6 倍まで広げ、距離で減衰させる。カード上だけで反応すると、乗った瞬間に最大角へ跳ねる
- 回転は ±14° まで。それ以上傾けると文字が歪んで読めず、カードの縁が背景から浮きすぎる
- 中身は translateZ(40px) で手前に出す。preserve-3d が無いと、傾けても中身が平面に貼り付いたままになる
- JS
- ホバー
下線スライドリンク
Animated Underline Link
ホバーで下線が右から消えて左から伸びる。テキストリンクの上品な定番演出。
- transform-origin を hover 時は left、離脱時は right に切り替える。片方に固定すると「伸びた側へ縮む」不自然な戻りになる
- 下線は ::after の 2px を scaleX で伸ばす。text-decoration や border-bottom はアニメーションできない
- text-decoration:none にするなら、色＋太字で本文と区別し、focus-visible では下線を出す。手がかりが hover だけのリンクは本文に埋もれる
- JS
- ホバー
カード反転
Flip Card
ホバー（PC）またはタップ（スマホ）でカードがY軸回転して裏面を表示。transform-style: preserve-3d＋backface-visibility: hiddenで実装。
- 表裏は同じ位置に絶対配置し、裏面だけ最初から rotateY(180deg) にしておく。カード全体を 180° 回すと裏面が正面を向く
- backface-visibility:hidden を両面に付ける。無いと回転の途中で裏面が鏡文字のまま透けて見える
- perspective はカードではなく親の scene に付ける。カード自身に付けると回転中に遠近が効かず、平面が回るだけに見える
- JS
使い分け表
| パーツ | 操作 | 技術 | 向く場面 | 状態 |
|---|---|---|---|---|
| 3Dチルトカード 3D Tilt Card | ホバー | JS | ポートフォリオ・製品カードの見せ場・カーソル操作が主のPC向けヒーロー | default / hover |
| 画像ズーム＋タイトル Image Zoom on Hover | ホバー | JS | 記事・作品のカード一覧・サムネイルにタイトルを重ねたい | default / hover / active |
| スポットライト追従 Spotlight Hover Card | ホバー | JS | ダーク背景のカードに高級感を出す・料金・機能カードのホバー演出 | default / hover / active |
| 光沢スイープ Shine Sweep | ホバー | JS | プレミアム・限定などリッチに見せたいボタン・バナーやカードの一段上の質感 | default / hover / active |
| 下線スライドリンク Animated Underline Link | ホバー | JS | 本文中・ナビのテキストリンク・上品に反応を返したいリンク | default / hover / active |
| グレースケール→カラー Grayscale-to-Color Hover | ホバー | JS | 写真ギャラリー・ロゴ一覧・選んだ1枚だけ色を付けて注目させる | default / hover / active |
| カード反転 Flip Card | ホバー | JS | 表に要約・裏に詳細の2面カード・暗記カード・プロフィール | default / hover / focus / active |
| カスタムカーソル追従 Custom Cursor | ホバー | JS | ブランドサイト・ポートフォリオの演出・ホバー対象で反応を大きく見せたい | default / hover |
| フラッシュライト追従 Flashlight Reveal | ホバー | JS | ティザー・謎解きなど探索させたい演出・ダークなヒーローの遊び | default / hover |
すべての見本（9件）
- ホバー
3Dチルトカード
3D Tilt Card
カーソルの位置に合わせてカードが立体的に傾く。カード周辺の広い範囲で反応するので、離れた場所からでも動く。
- JS
- ホバー
画像ズーム＋タイトル
Image Zoom on Hover
ホバーで画像がゆっくり拡大し、タイトルが浮かび上がる。カード型の記事一覧で定番。
- JS
- ホバー
スポットライト追従
Spotlight Hover Card
カーソルの周りだけ光が灯り、動かすと付いてくる。暗い背景のカードに高級感が出る。
- JS
- ホバー
光沢スイープ
Shine Sweep
ホバーすると斜めの光がツヤッと走り抜ける。ボタンやバナーを一段リッチに見せる。
- JS
- ホバー
下線スライドリンク
Animated Underline Link
ホバーで下線が右から消えて左から伸びる。テキストリンクの上品な定番演出。
- JS
- ホバー
グレースケール→カラー
Grayscale-to-Color Hover
普段はモノクロ、ホバーでふわっと色づいて少し拡大。写真ギャラリーで効果的。
- JS
- ホバー
カード反転
Flip Card
ホバー（PC）またはタップ（スマホ）でカードがY軸回転して裏面を表示。transform-style: preserve-3d＋backface-visibility: hiddenで実装。
- JS
- ホバー
カスタムカーソル追従
Custom Cursor
小さなドットがカーソルに張り付き、リングが少し遅れて追いかける。ボタンに乗ると大きく開く、定番のサイト演出。
- JS
- ホバー
フラッシュライト追従
Flashlight Reveal
暗闇に隠れた内容を、カーソル周りだけ懐中電灯で照らして読ませる。CSS mask の円形グラデで“穴”を開けて実装。
- JS