• 操作
  • エリアホバー

#area hover 016

ホバーでテキストが浮かび上がる

参考サイトURL
動きの解説

テキストが背景から分離して浮き上がってくるような3D的な動きは、情報の階層構造(手前と奥)を直感的に示します。重要なメッセージやキャッチコピーを強調したい場合に、平面的なレイアウトの中で確かな存在感を与えます。text-shadowを幾重にも重ねて立体的な影を作るか、transform: perspectiveとrotate、translateZを組み合わせて実際に3D空間で動かす手法があります。影のボケ具合や距離感をリアルに調整することで、安っぽくない、洗練されたタイポグラフィ表現が可能になります。