下へスクロールしてください。各ブロックが視界に入るのに合わせて現れ、上部のバーが読み進めた量を示します。JavaScript は使っていません。

交差の量が、そのまま進行度になる

animation-timeline: view() を書くと、要素とビューポートの交差量がアニメーションの再生位置に対応します。IntersectionObserver で閾値を管理する必要がありません。

範囲は animation-range で決める

cover 12% から cover 48% までを使う、という指定です。全域を使うと画面中央でようやく完成するので、読み物では前半で終わらせるほうが自然に感じます。

未対応環境では最初から見える

@supports で囲っているので、対応していないブラウザではアニメーションが当たらず、要素は通常どおり表示されます。内容が読めなくなることはありません。

動きを減らす設定を尊重する

prefers-reduced-motion: reduce のときはアニメーションを外し、進捗バーも止めます。動きそのものが体調に影響する人がいるため、これは装飾ではなく必須の配慮です。