Mobirise Tutorials

Animationen im Header

Animierte Bereiche im Header beim Laden der Seite

Animierte Elemente

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 Class-Icon

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.

© Copyright Mobirise-Tutorials.com

Datenschutz und Impressum

Google Translator
Funktionale Cookies akzeptieren