Animation

Die Erlebniswelten Scroll-Animationen werden beim Scrollen der Seite ausgelöst.

Die Animation wird in den Layout-Einstellungen in das Feld CSS-Klassen (2) des Blocks (1) eingefügt.

Beispiel:

zen-animate slide-in-blurred-bottom

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-in

• fade-in-top

• fade-in-bottom

• fade-in-fwd

• slide-in-top

• slide-in-right

• slide-in-bottom

• slide-in-left

• slide-in-blurred-top

• slide-in-bck-center

• slide-in-blurred-bottom beliebt

• puff-in-center

• flip-in-hor-top

• flip-in-hor-bottom

• swing-in-bottom-fwd

• bounce-in-bottom

• scale-in-center

Scroll-Overlay / Parallax Animation

Zum Einleiten einer Animation verwende die Klasse zen-scroll-overlay

Beispiel: