Comment on page
Zusätzliche CSS-Klassen für Animationen
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".
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 | |
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>
Beispiel: CSS-Klassen für Scroll-Animationen
Last modified 25d ago