Animation & Effekte
Animationen
Die Erlebniswelten Scroll-Animationen werden beim Scrollen der Seite ausgelöst. Die Inhalte lassen sich so animiert einblenden.
Wähle den Block (1) oder die Sektion aus und öffne den Bereich Animationen & Effekte (2). Wähle aus der Liste Animationstyp (2) die gewünschte Animation aus.
Über die Erweiterten Einstellungen (1) öffnet sich ein Fenster mit weiteren Einstellungen. Werden diese nicht eingestellt, greifen die Standard-Werte aus der Theme-Konfiguration.
Die Dauer (2) gibt an, wie lange die Animation in Sekunden dauert. Die Verzögerung (3) beschreibt die Dauer, bis die Animation beginnt. Erreicht ein Element also durch Scrollen den sichtbaren Bereich, wartet die Animation noch weitere 0,25 Sekunden bis die Animation beginnt. Als Offset (4) wird der Abstand in Pixel bezeichnet, wie weit das Element vom unteren Bildschirmrand entfernt sein muss, bis die Animation ausgelöst wird. Nur einmal abspielen (5) sorgt dafür, dass die Animation nur einmalig abgespielt wird, andernfalls wird die Animation immer abgespielt, wenn das Element wieder in den Sichtbereich (Viewport) eintritt.
Die Animationen werden ausgelöst, wenn sich das Element durch Scrollen des Besuchers in den Sichtbereich des sogenannten Viewports bewegt.
Die Animation wird in den Layout-Einstellungen in das Feld CSS-Klassen (2) des Blocks (1) eingefügt.
Beispiel:
Die Animationen werden ausgelöst, wenn sich das Element durch Scrollen des Besuchers in den Sichtbereich des sogenannten Viewports bewegt.
Scroll-Animationen
Zum Einleiten einer Animation verwende die Klasse zen-animate in Verbindung mit einer der folgenden vorgefertigten Animationen:
fade-infade-in-topfade-in-bottomfade-in-fwdslide-in-topslide-in-rightslide-in-bottomslide-in-leftslide-in-blurred-topslide-in-bck-centerslide-in-blurred-bottombeliebtpuff-in-centerflip-in-hor-topflip-in-hor-bottomswing-in-bottom-fwdbounce-in-bottomscale-in-center
Effekte
Scroll Overlay ist weniger eine Animation, sondern eher ein Verhalten und kann gesondert gewählt werden. Man kann es mit dem Verhalten eines Parallaxeneffekts vergleichen.
Scroll Overlay
Wähle dazu einen Block (1) oder die Sektion aus, öffne den Reiter Animationen & Effekte (2) und aktiviere die Option Scroll Overlay (3).
Sobald Scroll Overlay (1) aktiviert wird, kann keine Animation ausgewählt werden und umgekehrt. Beim Scroll Overlay wird die Eben fixiert, sodass keine Eintrittsanimation gestartet würde.
Beispiel:
Last updated