SCROLL ANIMATION

FÜR ZETA PRODUCER

FADE

CSS-Klasse: " data-aos="fade-right

CSS-Klasse: " data-aos="fade-up-right

CSS-Klasse: " data-aos="fade-up-left

CSS-Klasse: " data-aos="fade-down-right

CSS-Klasse: " data-aos="fade-down-left


FLIP

CSS-Klasse: " data-aos="flip-right


ZOOM

CSS-Klasse: " data-aos="zoom-in-up

CSS-Klasse: " data-aos="zoom-in-down

CSS-Klasse: " data-aos="zoom-in-left


Viele weitere Varianten findet ihr auf der Seite von

michalsnik


Auch einen kompletten Container können wir mit einem Scroll-Effekt versehen

Dieser Container wurde mit dem Effekt: zoom-in versehen


Dieser Container wurde mit dem Effekt: fade-up versehen


Dieser Container wurde mit dem Effekt: flip-left versehen


Wir können die Effekte auch zeitverzögert einblenden lassen wie es am Anfang der Seite zu sehen ist.

Mama, warum hat Papa so wenig Haare?
data-aos-delay="300" data-aos="fade-left" data-aos-easing="ease"

Er denkt zu viel, Schätzchen?
data-aos-delay="1200" data-aos="fade-up" data-aos-easing="ease"

Mama, warum hast du so viele Haare?
data-aos-delay="2100" data-aos="fade-down" data-aos-easing="ease"

Ich glaube, es ist am besten, wenn du jetzt raus gehst und spielst.
data-aos-delay="3000" data-aos="zoom-in" data-aos-easing="ease"


So bindet ihr das in euere Seite ein

CSS-Code

Diesen Code per Einstellungen > CSS einfügen.

Quellcode markieren & kopieren

Script

DieseScript per Widget > Quelltext am Ende der Seite einfügen und anpassen.

Quellcode markieren & kopieren

  • Um einem Artikel (funktioniert bei allen Artikeln wo man eine CSS-Klasse hinzufügen kann) oder einem Container nun einen Effekt hinzu zu fügen müssen wir ein wenig tricksen.
  • Wir gehen im Artikel unten auf das Mischpult und dann auf mehr um den Effekt in der CSS-Klasse hinzu zu fügen.
  • Im Container gehen wir auf "Hier beginnt ein neuer Container" um die CSS-Klasse hinzu zu fügen.
  • Nun fügt ihr bei "CSS-Klasse" unten stehenden Code ein und tauscht den Eintrag "zoom-in" mit dem gewünschten Effekt aus. Die Gänsefüßchen müsst ihr dabei unbedingt an ihrer Position lassen. Diese beenden den Eintrag für die CSS-Klasse.

Code

Diesen Code einfügen, die Gänsefüßchen dabei an iherer Position belassen

Quellcode markieren & kopieren

  • Alternativ könnt ihr die Effekte natürlich auch per HTML im Widget "Text" oder "Quelltext" einfügen.
  • Das geht z.B. mir einem DIV.
  • Unten stehender Code zoomt den Text nach einer Sekunde ein.

HTML-Code

Diesen Code per Widget "Text" oder "Quelltext" einfügen.

Quellcode markieren & kopieren

  • Ihr könnt aber den Effekt auch direkt einem Tag hinzufügen.
  • Das geht z.B. in einem <H3> (Überschrift), <p>(Text), <img>(Bild) usw.
  • Unten stehender Code zoomt den Text nach einer Sekunde ein.

HTML-Code

Diesen Code per Widget "Text" oder "Quelltext" einfügen.

Quellcode markieren & kopieren

script

support
Dutch English French German