ページをスクロールすると、上部の青いバーが伸びていきます。ページの読了率を視覚的に表示しています。
animation-timeline: scroll(root) で、ページ全体のスクロール量に連動させています。
↓ スクロールしてください ↓
この要素はビューポートに入ると、下からフェードインします。animation-timeline: view() と animation-range: entry を使っています。
IntersectionObserverを使わなくても、CSSだけでスクロール連動のフェードインが実現できます。
非対応ブラウザでは @supports によるフォールバックで、アニメーションなしの状態が表示されます。
GPU描画（transform + opacity）なので、パフォーマンスも良好です。メインスレッドをブロックしません。
スクロールを上に戻すとアニメーションも巻き戻ります。これもCSS Scroll-Driven Animationsの特徴です。
↓ パララックスセクションへ ↓
下のセクションでは背景とテキストが異なる速度でスクロールします。背景は -20% から 20%、テキストは 10% から -10% に移動しています。
背景がゆっくりスクロールします
このページで紹介した3つのデモは、すべてJavaScriptを一切使わずにCSSだけで実装しています。
scroll(root) でページ全体に連動view() + animation-range: entryview() + animation-range: cover で速度差