CSSスクロール駆動アニメーション：スクロール画像表示

この例は、CSSスクロール駆動アニメーションを実演しています。これはJavaScriptを一切使用せず、スクロール位置によってアニメーションを制御する最新のCSS機能です。画像はスクロールに合わせてスムーズに表示され、ビューポート内での要素の位置に基づいてスケーリングとぼかし効果が遷移します。

animation-timeline: view()プロパティはアニメーションをスクロールタイムラインに接続し、animation-rangeはビューポート内での要素の位置に対してアニメーションがいつ開始・終了するかを定義します。

この技術は、ユーザーのスクロールと完全に同期した滑らかでパフォーマンスの良いアニメーションを提供し、優れたブラウザパフォーマンスを維持します。