Scroll Animation 2

SCROLL ANIMATION

FÜR ZETA PRODUCER

FADE

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

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

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

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

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

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

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

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

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

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

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

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"

Diesen Code per Einstellungen > CSS einfügen.

Quellcode markieren & kopieren

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.

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.