In diesem Artikel erfährst du mehr über zusätzliche CSS-Klassen für Animationen in ThemeWare®.
Hinweis: Dieser Artikel richtet sich an Profis und Experten. Bist du dir nicht absolut sicher, unterstützen wir dich gerne: ThemeWare® Services im Überblick
ThemeWare® verfügt über unterschiedliche Sammlungen an CSS-Klassen die du je nach Bedarf aktivieren oder deaktivieren kannst.
Die Konfiguration dafür findest du im Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen".
In diesem Artikel erklären wir dir die Funktion der zusätzlichen "CSS-Klassen für Animationen".
CSS-Klassen für Animationen
Diese Sammlung aktivierst/deaktivierst du über die Konfiguration "CSS-Klassen für Animationen laden (optional)".
Ist diese Konfiguration aktiviert lädt ThemeWare® die folgenden Animations-Klassen:
| CSS-Klasse | Beschreibung |
|---|---|
| twt-back-in-down | folgt... |
| twt-back-in-left | |
| twt-back-in-right | |
| twt-back-in-up | |
| twt-bounce | |
| twt-bounce-in | |
| twt-bounce-in-down | |
| twt-bounce-in-left | |
| twt-bounce-in-right | |
| twt-bounce-in-up | |
| twt-fade-in | |
| twt-fade-in-down | |
| twt-fade-in-left | |
| twt-fade-in-right | |
| twt-fade-in-up | |
| twt-flash | |
| twt-flip | |
| twt-flip-in-x | |
| twt-flip-in-y | |
| twt-head-shake | |
| twt-heartbeat | |
| twt-jack-in-the-box | |
| twt-jello | |
| twt-lightspeed-in-right | |
| twt-lightspeed-in-left | |
| twt-pulse | |
| twt-rotate-in | |
| twt-rotate-in-down-left | |
| twt-rotate-in-down-right | |
| twt-rotate-in-up-left | |
| twt-rotate-in-up-right | |
| twt-rubber-band | |
| twt-shake-x | |
| twt-shake-y | |
| twt-swing | |
| twt-tada | |
| twt-wobble | |
| twt-zoom-in | |
| twt-zoom-in-down | |
| twt-zoom-in-left | |
| twt-zoom-in-right | |
| twt-zoom-in-up |
Anwendungsbeispiel
Die oben genannten CSS-Klassen kannst du einfach im HTML-Editor eines CMS-Elements nutzen um ein bestimmtes HTML-Element damit zu animieren. Damit die Animation ausgeführt wird, ist zusätzlich die CSS-Klasse twt-animate nötig.
Der Code sieht dann etwas wie folgt aus:
<h2 style="text-align: center;" class="twt-animate twt-back-in-down">Überschrift für einen Text</h2>
<hr>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>Screenshots
Beispiel: CSS-Klassen für Scroll-Animationen