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
FLIP
CSS-Klasse: " data-aos="flip-left
CSS-Klasse: " data-aos="flip-right
CSS-Klasse: " data-aos="flip-up
CSS-Klasse: " data-aos="flip-down
ZOOM
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"
So bindet ihr das in euere Seite ein
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 belassenQuellcode 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.
- 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.
