導入: なぜ今、 が重要なのか
Webサイトに動きを取り入れる際、JavaScriptでスクロールイベントを監視し、計算してクラスを付与する…そんな手間のかかる実装に疲れていませんか？現在、主要ブラウザでサポートが進んでいる「スクロール駆動アニメーション（Scroll-driven Animations）」を使えば、CSSだけで驚くほど滑らかな演出が可能です。その制御の鍵を握るのが
基礎知識: ビュー進捗タイムラインの仕組み
・cover: 要素が画面に少しでも入ってから、完全に消えるまで。
・contain: 要素が画面内に「完全に収まっている」期間のみ。
・entry: 画面に「入り始める」瞬間から「完全に収まる」までの間。
・exit: 画面から「出始める」瞬間から「完全に消える」までの間。
これらを `animation-range` プロパティと組み合わせることで、アニメーションの実行タイミングを細かく制御できます。
実装/解決策: animation-range で制御する
基本的な実装フローは、`view-timeline` で監視対象を指定し、`animation-range` で
サンプルプログラム: 要素の出現・消失に合わせたフェード演出
以下は、要素が画面に進入した時にふわっと現れ、画面から出る時に消えるコード例です。
/ 監視対象の要素 /
.box {
animation-timeline: view();
/ 「要素が入り始めてから完全に収まるまで」をアニメーション範囲に設定 /
animation-range: entry 0% cover 30%;
animation-name: fade-in;
animation-fill-mode: both;
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(50px); }
to { opacity: 1; transform: translateY(0); }
}
このコードをコピーして試してみてください。`entry 0%` は「要素が画面の下端に触れた瞬間」を指し、`cover 30%` は「画面内での進捗が30%に達した時点」を指します。これにより、スクロール量に応じてアニメーションが同期して再生されます。
応用・注意点: 現場で役立つ補足とバグ回避
1. ブラウザ対応状況の確認: 非常に強力な機能ですが、現時点では最新のブラウザ環境での利用を前提としてください。`@supports` を使って、未対応ブラウザ向けにフォールバック（デフォルトのスタイル）を用意するのがプロの作法です。
2. 範囲の指定ミス: `animation-range-start` と `animation-range-end` を別々に設定する場合、`start` が `end` よりも後の位置にならないよう注意してください。意図しない挙動やアニメーションの停止を招くことがあります。
3. デバッグのコツ: 動きが期待通りにならない場合は、`outline` を要素に一時的に設定し、スクロールポートに対して要素がどのタイミングで重なっているかを可視化すると、どの範囲キーワードを使うべきか判断しやすくなります。
スクロール駆動アニメーションを使いこなせば、Webサイトの表現力は劇的に向上します。まずは `entry` や `exit` から試して、動きの心地よさを体感してみてください。
コメント