Zum Hauptinhalt springen

Scrollanimation

Die Scrollanimationen werden mit der AOS-Bibliothek erstellt.

Inhaltselemente können einfach animiert werden, indem als Rahmen (unter den Eigenschaften für die Darstellung) eine "Angepasste Scrollanimation" ausgewählt wird. Es stehen drei vordefinierte Scrollanimationen zur Verfügung. Dessen Animationseigenschaften können über den Konstanteneditor angepasst werden.

Weitere Animationen können mit Hilfe von Data-Attributen für jedes Inhaltselement einzeln definiert werden. Die Data-Attribute können im Reiter "Erscheinungsbild" unter Attribute im Feld "Zusätzliche Attribute" hinzugefügt werden.

Weitere Beispiele sind auf der Demoseite von Michael Sajnóg zu finden.

Mit Rahmen für "Angepasste Scrollanimation"

Animation 1

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Animation 2

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Animation 3

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Mit Data-Attributen

data-aos="fade-up"
data-aos="fade-down"

data-aos="fade-right"
data-aos="fade-left"

data-aos="flip-left"
data-aos="flip-right"

data-aos="zoom-in"
data-aos="zoom-out"

data-aos="zoomin-up" data-aos-duration="1000"
data-aos="zoom-up" data-aos-delay="1000"

data-aos="fade-up" data-aos-anchor-placement="top-center"
data-aos="fade-up" data-aos-anchor-placement="top-center" data-aos-offset="200"
Platzhalter