Animation

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

Die Animationen werden ausgelöst, wenn sich das Element durch Scrollen des Besuchers in den Sichtbereich des sogenannten Viewports bewegt.

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

Die Animation wird in den Layout-Einstellungen in das Feld CSS-Klasse des Blocks eingefügt.

Beispiel:

zen-animate slide-in-blurred-bottom

Last updated