§16-01Motion

Scroll-driven animation

スクロール量に連動してアニメーションを進める。

読み進める速さに合わせて図や説明が変化し、手順や構造を段階的に伝えられる。製品紹介やストーリー形式の記事で使う。

実装のポイント

対応ブラウザでは CSS の animation-timeline: scroll() で JS なしに進捗を連動できる。JS で実装する場合は scroll を passive で購読し、rAF で更新をまとめる。