Skip to main content

Scroll Animation 2

  • Dieses Widget fügt der JS-Datei sowie der CSS-Datei des Projektes einen Code für die "Scroll-Animation" hinzu.
  • Das Widget am Ende der Seiten einfügen in denen die Animationen verwendet werden sollen.
  • Anschließend kann jedem Artikel oder Container per CSS-Klasse die gewünschte Animation hinzu gefügt werden.
  • Ihr könnt eine Zeit vorgeben in welcher die Animation abläuft, sowie eine von gesamt 33 Timing-Funktion hinzufügen.
  • Eine Übersicht der Timing-Funktionen finder ihr HIER.
  • In dem gewünschten Widget unten links auf das "MISCHPULT", anschließend auf "MEHR", hier im Feld CSS-Klasse eine der Klassen eintragen.

          " data-aos="fade-up
          " data-aos="fade-down
          " data-aos="fade-right
          " data-aos="fade-left
          " data-aos="fade-up-right
          " data-aos="fade-up-left
          " data-aos="fade-down-right
          " data-aos="fade-down-left
          " data-aos="slide-up
          " data-aos="slide-down
          " data-aos="slide-left
          " data-aos="slide-right
          " data-aos="flip-left
          " data-aos="flip-right
          " data-aos="flip-up
          " data-aos="flip-down
          " data-aos="zoom-in
          " data-aos="zoom-in-up
          " data-aos="zoom-in-down
          " data-aos="zoom-in-left
          " data-aos="zoom-in-right
          " data-aos="zoom-out
          " data-aos="zoom-out-up
          " data-aos="zoom-out-down
          " data-aos="zoom-out-right
          " data-aos="zoom-out-left"

  • Ihr könnt die Animationen auch mit Zeit-Verzögerung einblenden lassen.
  • " data-aos="fade-left" data-aos-delay="500 / würde "Fade-Left" nach einer halben Sekunde einblenden.
  • " data-aos="fade-down" data-aos-delay="1600 / würde "Fade-Down" nach 1,6 Sekunden einblenden.
  • Das macht natürlich nur im Sichtbereich vor dem scrollen Sinn. Hierbei auch auf die Mobile Ansicht achten.

Hier ein paar Beispiele

Zoom In Zoom Out Flip Fade Zeitverzögerung Eigene Animationen
  • Entpacke die heruntergeladene *.zip Datei
  • Im Verzeichnis "C: \ Users \ Benutzername \ Documents \ Zeta Producer xx" einen Ordner "widgets" anlegen.
  • Kopiere den kompletten entpackten Ordner in das neu angelegte Unterverzeichnis "widgets".
  • Starte Zeta Producer
  • Das Widget sollte nun in der Widgetübersicht unter dem Reiter "Sonstiges" angezeigt werden.

Alle Widgets wurden mit dem Layout "Flat Responsive" erstellt und in vielen anderen Layouts getestet. Da alle Layouts in Zeta Producer ihre Besonderheiten haben kann es durchaus vorkommen, dass ein Widget in Ihrem Layout nicht wie gewünscht dargestellt wird.


Home    Widgets    Codeschnipsel    Support    Impressum    Datenschutz