下からふわっと現れるタイトル
ページ読み込み時に、見出しが下からふわりと立ち上がって現れる上品なイントロ演出です。初期状態を opacity:0 と translateY(30px) で下方に沈ませておき、 @keyframes fu で opacity:1 ・ translateY(0) へ移行させます。
解説
ページ読み込み時に、見出しが下からふわりと立ち上がって現れる上品なイントロ演出です。初期状態を opacity:0 と translateY(30px) で下方に沈ませておき、@keyframes fu で opacity:1・translateY(0) へ移行させます。イージングに cubic-bezier(.2,.85,.4,1) を使い、最後にすっと止まる気持ちのよい減速を作っているのが特徴です。.2s の遅延でワンテンポ置いてから動き出します。
使いどころ
- ヒーローセクションのメインキャッチの登場演出
- ファーストビューでブランド名を印象的に見せたいとき
- セクション冒頭の見出しに上品な動きを足したいとき
動きの距離は translateY の値、速度は animation の 1.1s 部分、出るタイミングは .2s の遅延で調整できます。動きが苦手な閲覧者への配慮として prefers-reduced-motion でアニメーションを無効化するとより親切です。ページ読み込み時に一度だけ走る軽量なアニメーションなので、スクロール連動のような継続的な負荷はありません。JavaScript は不要です。
使用例・適したシーン
- ヒーローセクションのキャッチコピー
- セクション見出し
- 記事タイトル・ブログのリード
- コーポレートサイトのキービジュアル
よくある質問
動きをもっとゆっくり／速くできますか？
できます。animation プロパティの 1.1s が再生時間です。値を大きくするとゆっくり、小さくすると速くなります。出だしのタイミングは .2s の遅延値で調整できます。
動きが苦手な人への配慮はどうすれば？
prefers-reduced-motion: reduce のメディアクエリ内で animation を none にし、opacity:1・transform:none を指定すれば、動きを止めた状態で最初から表示できます。