Anmelden
Archiv
Kategorien

Tips & Tricks für Redakteure

Auf dieser Seite veröffentliche ich Tips und Tricks mit denen Redakteure unseres CMS ihre Inhalte ansprechender präsentieren können.

Im Seitenlayout des BSV sind die Dateien animate.css und das JQuery-Plugin Inview eingebunden. Redakteure können dadurch ihre Inhalte animiert einblenden. Ein Beispiel dafür sind die Einblendungen der Nachrichten-Überschrift in der Vollansicht einer Nachricht. Beim Beispiel kommt der Effekt zoomInUp zum Einsatz. Welche Effekte noch möglich sind, seht ihr auf dieser Seite.

Im Bereich Experteneinstellungen eines Inhaltselements tragt ihr einfach zwei CSS-Klassen ein, für mein Beispiel wäre das “animated zoomInUp”. Bitte dabei beachten: Diese CSS-Angabe bezieht sich auf das gesamte Inhaltselement! Wenn ihr nur einzelne kleine HTML-Elemente animieren wollt, dann bearbeitet dieses Element direkt im HTML-Quelltext.

Setzt die Animationen sparsam und sinnvoll ein! Zuviel Animationen nerven die Besucher.

Diese Art der Animation macht aber nur Sinn, wenn das entsprechende Element beim Laden der Seite im sichtbaren Bereich ist. Mit dem Inview-Plugin für JQuery kann die Animation alternativ erst ausgeführt werden, wenn das Element im sichtbaren Bereich erscheint.

Die CSS-Klasse “animated flipInX” habe ich auf die Bildergalerie in dieser Nachricht angewandt. Die CSS-Klasse wird dabei erst dem Element zugewiesen, wenn das Element im sichtbaren Bereich erscheint. Erst dann erfolgt auch die Animation.

Um ein Element auf diese Art und Weise zu animieren, muß Javascript eingefügt werden. Hier der Code für das Inhaltselement Galerie, welchen ich hier global verwende:

Der vorstehende Code dient nur als Beispiel für eigene Experimente. Standardmäßig habe ich die Galerie mit CSS auf eine Transparenz von 20% eingestellt (opacity: 0.2). Mit dem Code wird die Transparenz auf 100% erhöht (Zeile 8), sobald das Element komplett sichtbar ist. In Zeile 9 wird die CSS-Klasse “animated flipInX” dem Element zugewiesen. In Zeile 10 wird das Ausführen des Inview-Plugins dauerhaft beendet, damit sich der Effekt nicht ständig wiederholt.

Nachfolgend ein Videotutorial von HTMLworld zur animate.css und zum JQuery-Plugin. Es richtet sich an fortgeschrittene Benutzer, die so etwas auch in ihre eigene Website einbauen wollen. Ein Videotutorial für unsere Redakteure ist geplant und wird zum gegebenen Zeitpunkt im Backend verlinkt.