Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m291:learningunits:lu13:theorie:f_animation_timeline [2026/05/31 23:32] – angelegt gkoch
+++ de:modul:m291:learningunits:lu13:theorie:f_animation_timeline [2026/06/01 00:21] (aktuell) – gkoch
@@ Zeile 1: / Zeile 1: @@
 ====== LU13f - Scroll-gesteuerte Animationen ======
+{{ :de:modul:m291:learningunits:lu13:theorie:scroll_animation.gif?nolink | Gif: Scroll Animation}}
 Mit ''animation-timeline: view()'' wird der Fortschritt einer Animation nicht durch Zeit gesteuert, sondern durch die **Position des Elements im Viewport**. Das Element animiert herein, wenn es beim Scrollen sichtbar wird – ganz ohne JavaScript.
@@ Zeile 45: / Zeile 47: @@
 </WRAP>
-===== overflow: clip vs. overflow: hidden =====
-Beide Werte schneiden visuell überstehende Inhalte ab – der entscheidende Unterschied liegt im Scroll-Verhalten:
-<WRAP center round box 80%>
-^ ^ ''overflow: hidden'' ^ ''overflow: clip'' ^
-| **Visuelles Ergebnis** | Inhalt wird abgeschnitten | Inhalt wird abgeschnitten |
-| **Scroll-Container** | Ja – neuer Scroll-Container | Nein – kein Scroll-Container |
-| **animation-timeline: view()** | Unterbricht scroll-gesteuerte Animationen | Funktioniert korrekt |
-| **Scrollbar** | Kann Scrollbar erzeugen | Keine Scrollbar möglich |
-| **Browserunterstützung** | Alle Browser | Chrome 90+, Firefox 102+, Safari 16+ |
-</WRAP>
-**Faustregel:** Wenn Sie Inhalte nur visuell abschneiden möchten (z. B. überstehende Dekorationselemente), verwenden Sie ''overflow: clip''. Nur wenn Sie tatsächlich einen scrollbaren Bereich erstellen möchten, verwenden Sie ''overflow: hidden'' oder ''overflow: auto''.
 ===== Vollständiges Beispiel =====