← Playgrounds一覧に戻る
Playground
スクロール量をプログレスバーで示す
animation-timeline: scroll()で、スクロールコンテナを読み進めた割合に合わせてプログレスバーを伸ばします。
段落 1：スクロールすると、上のバーが読み進めた割合だけ伸びます。
段落 2：スクロールすると、上のバーが読み進めた割合だけ伸びます。
段落 3：スクロールすると、上のバーが読み進めた割合だけ伸びます。
段落 4：スクロールすると、上のバーが読み進めた割合だけ伸びます。
段落 5：スクロールすると、上のバーが読み進めた割合だけ伸びます。
段落 6：スクロールすると、上のバーが読み進めた割合だけ伸びます。
段落 7：スクロールすると、上のバーが読み進めた割合だけ伸びます。
段落 8：スクロールすると、上のバーが読み進めた割合だけ伸びます。
段落 9：スクロールすると、上のバーが読み進めた割合だけ伸びます。
段落 10：スクロールすると、上のバーが読み進めた割合だけ伸びます。
段落 11：スクロールすると、上のバーが読み進めた割合だけ伸びます。
段落 12：スクロールすると、上のバーが読み進めた割合だけ伸びます。
Playground
animation-rangeを切り替えて進む区間を比べる
animation-timeline: view()でカードを左から少しずつ表示し、animation-rangeを切り替えてカードが現れる区間を比べられます。
カードのanimation-range
カード 1
カード 2
カード 3