Scroll Animation 1


  • Dieses Widget fügt der JS-Datei des Projektes ein Script "Scroll-Animation" hinzu.
  • Das Widget braucht nur einmal im Projekt hinzu gefügt werden, um es wieder zu finden am besten am Ende der Startseite einfügen.
  • Anschließend kann jedem Artikel oder Container per CSS-Klasse die gewünschte Animation hinzu gefügt werden.
  • In dem gewünschten Widget unten links auf das "MISCHPULT", anschließend auf "MEHR", hier im Feld CSS-Klasse eine der folgenden Klassen eintragen:
           scrollflow -pop
           scrollflow -slide-left
           scrollflow -slide-right
           scrollflow -slide-top
           scrollflow -slide-bottom
           scrollflow -pop -opacity
           scrollflow -slide-left -opacity
           scrollflow -slide-right -opacity
           scrollflow -slide-top -opacity
           scrollflow -slide-bottom -opacity
           scrollflow -opacity

Mann Brille

scrollflow -slide-right

Mann Brille

scrollflow -slide-left

Mann Brille

scrollflow -pop

Mann Lutscher

scrollflow -slide-bottom

Jugendlicher

scrollflow -slide-top


Mann Brille

scrollflow -slide-left -opacity

Mann Brille

scrollflow -slide-right -opacity

Frau Bünett

scrollflow -pop -opacity

Frau Wasser

scrollflow -slide-bottom -opacity

Frau Blond

scrollflow -slide-top -opacity


  • 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 das ein Widget nicht in deinem Layout wie gewünscht dargestellt wird.