Bitte stellt sicher, dass die Option "Animation on Scroll" in den globalen Style-Einstellungen am Pinsel 🖌️ von Mobirise deaktiviert ist.
Hier zeige ich als Beispiel im Kopf der Seite einige animierte Elemente, die mit einfachen CSS-Klassen vordefiniert sind. Natürlich sollte man mit solchen Animationen immer sehr bedacht und sparsam umgehen. Oben habe ich nur vier unterschiedliche Animationen beispielhaft angewendet, sowie noch weitere im Popup-Fenster.
Hierzu ladet Euch die Datei animate.css, die hier hier downloaden könnt: https://animate.style/
Zunächst benötigt ihr die CSS-Datei, die ihr entweder im Bereich "Inside <head> code" der Seiteneinstellungen verlinkt:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
oder direkt downloadet, wie ich es hier getan habe. Klicke hier zum Download meiner Datei und dann eben einen internen Link zu der Datei im Bereich "Inside <head> code" setzt, die ich hier in ein neu erstelltes Verzeichnis "animate-css" kopiert habe:
<link rel="stylesheet" href="animate-css/animate.css">
Nun fügt ihr die jeweilige Class von der Seite https://animate.style/ dem zu animierenden Element einfach hinzu.
Ihr habt die Möglichkeit, aus nahezu 100 verschiedenen Animationen auszuwählen. Die verschiedenen CSS-Klassen findet ihr auf der Webseite von animate.style. Um die jeweilige Klasse zu kopieren, bewegt einfach die Maus über das kleine quadratische Symbol
Die Verwendung an z.B. einem <h1> Tag würde dann so aussehen:
<h1 class="animate__animated animate__bounce">Animierter Text</h1>
Dabei muss die erste class="animate__animated" immer eingesetzt werden und die zweite Class, hier im Beispiel class="animate__bounce" immer den Prefix "animate__" tragen. Es ändert sich also jeweils nur der Name der Animation am Ende.
Es gibt auch noch zusätzliche Klassen, die z.B. eine Verzögerung des Ladens bewirken. Es is möglich eine Verzögerung von 1 bis 5 Sekunden zu bestimmen und auch jeweils die Hälfte, also z.B. 0.5s oder 2.5s. Den Buttons habe ich also eine Verzögerung von hier 1s gegeben:
class="animate__animated animate__backInUp animate__delay-1s"
Bitte besuche die Seite des Autors, um weitere Optionen für langsame, schnelle oder wiederholte Animationen zu entdecken.
Hier geht es zu einer Animation beim Scrollen der Seite.
Viel Erfolg.