Beispiel zur Notiz „Scroll-getriebene Animationen“

Lesefortschritt mit animation-timeline: scroll()

Scrollen: Der orange Balken oben wächst mit dem Scrollfortschritt.

Scroll-getriebene Animationen: Chrome 115, Safari 26; Firefox fehlt – dort erscheint kein Balken.

Getestet in Chrome 152. Browserstand und Einordnung: siehe Notiz.

Fülltext 1: Dieser Absatz ist nur da, damit die Seite lang genug zum Scrollen ist. Er hat mit dem Beispiel selbst nichts zu tun.

Fülltext 2: Dieser Absatz ist nur da, damit die Seite lang genug zum Scrollen ist. Er hat mit dem Beispiel selbst nichts zu tun.

Fülltext 3: Dieser Absatz ist nur da, damit die Seite lang genug zum Scrollen ist. Er hat mit dem Beispiel selbst nichts zu tun.

Fülltext 4: Dieser Absatz ist nur da, damit die Seite lang genug zum Scrollen ist. Er hat mit dem Beispiel selbst nichts zu tun.

Fülltext 5: Dieser Absatz ist nur da, damit die Seite lang genug zum Scrollen ist. Er hat mit dem Beispiel selbst nichts zu tun.

Fülltext 6: Dieser Absatz ist nur da, damit die Seite lang genug zum Scrollen ist. Er hat mit dem Beispiel selbst nichts zu tun.

Fülltext 7: Dieser Absatz ist nur da, damit die Seite lang genug zum Scrollen ist. Er hat mit dem Beispiel selbst nichts zu tun.

Fülltext 8: Dieser Absatz ist nur da, damit die Seite lang genug zum Scrollen ist. Er hat mit dem Beispiel selbst nichts zu tun.

Fülltext 9: Dieser Absatz ist nur da, damit die Seite lang genug zum Scrollen ist. Er hat mit dem Beispiel selbst nichts zu tun.

Fülltext 10: Dieser Absatz ist nur da, damit die Seite lang genug zum Scrollen ist. Er hat mit dem Beispiel selbst nichts zu tun.

Fülltext 11: Dieser Absatz ist nur da, damit die Seite lang genug zum Scrollen ist. Er hat mit dem Beispiel selbst nichts zu tun.

Fülltext 12: Dieser Absatz ist nur da, damit die Seite lang genug zum Scrollen ist. Er hat mit dem Beispiel selbst nichts zu tun.

Fülltext 1: Dieser Absatz ist nur da, damit die Seite lang genug zum Scrollen ist. Er hat mit dem Beispiel selbst nichts zu tun.

Fülltext 2: Dieser Absatz ist nur da, damit die Seite lang genug zum Scrollen ist. Er hat mit dem Beispiel selbst nichts zu tun.

Fülltext 3: Dieser Absatz ist nur da, damit die Seite lang genug zum Scrollen ist. Er hat mit dem Beispiel selbst nichts zu tun.

Fülltext 4: Dieser Absatz ist nur da, damit die Seite lang genug zum Scrollen ist. Er hat mit dem Beispiel selbst nichts zu tun.

Fülltext 5: Dieser Absatz ist nur da, damit die Seite lang genug zum Scrollen ist. Er hat mit dem Beispiel selbst nichts zu tun.

Fülltext 6: Dieser Absatz ist nur da, damit die Seite lang genug zum Scrollen ist. Er hat mit dem Beispiel selbst nichts zu tun.

Fülltext 7: Dieser Absatz ist nur da, damit die Seite lang genug zum Scrollen ist. Er hat mit dem Beispiel selbst nichts zu tun.

Fülltext 8: Dieser Absatz ist nur da, damit die Seite lang genug zum Scrollen ist. Er hat mit dem Beispiel selbst nichts zu tun.

Fülltext 9: Dieser Absatz ist nur da, damit die Seite lang genug zum Scrollen ist. Er hat mit dem Beispiel selbst nichts zu tun.

Fülltext 10: Dieser Absatz ist nur da, damit die Seite lang genug zum Scrollen ist. Er hat mit dem Beispiel selbst nichts zu tun.

Fülltext 11: Dieser Absatz ist nur da, damit die Seite lang genug zum Scrollen ist. Er hat mit dem Beispiel selbst nichts zu tun.

Fülltext 12: Dieser Absatz ist nur da, damit die Seite lang genug zum Scrollen ist. Er hat mit dem Beispiel selbst nichts zu tun.