スクロール · スクロールで変わる
スクロール駆動アニメーション滚动驱动
- 追従
- 連続的
- 行き来できる
進行度がスクロール位置に直接結び付きます。上に戻せば逆再生され、タイムラインを手で動かす感覚になります。
使いどころ
スクロール位置で再生の進み具合を正確に操りたいときに使います。現れたときに一度だけ再生するなら「スクロールリビール」です。
パラメータ
animation-timeline: view() · animation-range: entry 0% → cover 40% · linear
レシピ
スクロール駆動アニメーション → entry 0% → cover 40% @ linear
AI に渡す一文
このプログレスバーをスクロール位置に連動させてください。animation-timeline: view() を使い、animation-range を entry 0% から cover 40% まで、linear で、200px スクロールする間に満ち、上に戻ると逆再生します。