Hi,
Du brauchst das CSS von Animate.css.
Wenn es Dich nicht stört, externe Inhalte zu laden, dann kannst Du Dir die CSS-Datei von deren CDN holen, siehe hier, letzter Absatz:
https://animate.style/#usage
Einfach den diesen Teil in den zusätzlichen Headtags Deines Seitenlayouts einfügen:
Code:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
Danach gibts Du den zu animierenden Elementen die entsprechenden CSS-Klassen, siehe Doku unter Basic Usage. Beispielsweise gibst Du einem Inhaltselement folgende CSS-Klassen und das Inhaltselement wird entsprechend animiert:
Code:
animate__animated animate__backInDown animate__slow
Die Animationen werden beim Laden der Seite durchgeführt, ohne Javascript sieht man die Animation also nur für Elemente above the fold (correct me, if I'm wrong). Eventuell musst Du das Ganze also um Javascript ergänzen, zum Beispiel, wenn die Animation erst ausgelöst werden soll, sobald das Element in den Viewport scrollt.
Gruß
Mathias
Lesezeichen