WordPress Revolution-Slider 6 Tutorial für Fortgeschrittene: Animationen einspielen

In WordPressvon Melissa Unkelbach1 Kommentar

Der Revolution Slider hat sich in den letzten Jahren als eines der beliebtesten Plugins für WordPress herausgestellt. Kein Wunder, denn von normalen Slides, ausgeklügelten Galerien bis hin zu animierten Webseiten kann das Tool alles. Neben unzähligen Einstellungsmöglichkeiten bietet das Plugin zusätzliche Erweiterungsmöglichkeiten und Aktionen. Und das ist noch nicht alles: Das neueste Update bringt nicht nur spannende Templates und neue Plugins mit sich, auch in Sachen Animation hat sich einiges getan.

In unserem ersten Tutorial über den Revolution Slider 6 haben wir Ihnen erzählt, wie man Sprungmarken und Links setzt (zum Tutorial). Diesmal geht es um das Einspielen von Animationen, um für mehr Interaktion und Abwechslung zu sorgen. Beide Tutorials lassen sich auch hervorragend verknüpfen.

Die folgenden Schritte setzen die Installation des Plugins und ein Grundverständnis über die Funktionen voraus.

Einen Vorgeschmack auf unser (etwas dezentes) Ergebnis erhalten Sie hier:

In unserem Beispiel beginnen wir mit einer dezenten Textanimation und lassen dann einzelne Elemente einblenden. Jedem Element ist eine andere Animation zugeteilt, die wir Ihnen gleich einzeln vorstellen und erklären. Die Tiere bestehen aus einzelnen freigestellten PNG-Dateien. Der graue Hintergrund ist ein einfaches Bild und könnte genauso gut als farbiger Hintergrund oder Farbverlauf direkt im Revolution Slider angelegt werden.

Animieren im Revolution Slider 6

Platzieren Sie Ihre gewünschten Elemente und Texte an die richtige Stelle in Ihrem Slider. 

Jedes Element wird unten neben der Zeitleiste als Ebene angelegt. Nun können Sie direkt starten:

Die Optionen für Animationen öffnen Sie, indem Sie neben Ihren Ebenen einen der Balken in der Zeitleiste anklicken, dem Sie eine Animation zuteilen möchten.

In der rechten Spalte unter “Keyframes” haben Sie nun die Möglichkeit, der Ebene einen Effekt zuzuteilen. Im Dropdown bei “IN” klicken Sie sich durch die unterschiedlichen Effekte, bis Ihnen einer zusagt. Im Slider sehen Sie bereits eine Vorschau des Effektes. Wiederholen Sie den Vorgang bei allen Elementen und Texten. Die OUT-Animationen nutzen Sie für die Outro-Balken eines Elements. Was das bedeutet, können Sie nachfolgend im Abschnitt “Der Umgang mit der Timeline” nachlesen.

Unter “Basics” sind die für Sie als Anfänger wichtigsten Felder “Duration” und “Start”. “Duration” gibt die Dauer eines Effektes in Millisekunden an, während “Start” den Beginn auf der Zeitleiste anzeigt. Bedeutet, wenn bei Start 1000 steht, beginnt der Effekt nach einer Sekunde (also nach 1000 Millisekunden), nachdem Ihr Slider gestartet ist. Die Duration können Sie entweder selber bestimmen oder Sie belassen es so, wie der Effekt diese vorgibt.

Sind Sie mit Ihren Einstellungen zufrieden, speichern Sie und schauen Sie sich Ihr Ergebnis in der Vorschau an.

In unserem Beispiel hat die Überschrift den Rotations-Effekt “Flip From Top”. Der Hund startet mit “Pop Up Smooth” durch und die Katze faded ganz klassisch ein, blendet sich jedoch zum Ende hin mit dem “Short Slide To Right”-Effekt wieder aus.

Ein klarer Nachteil bei der Auswahl der Effekte ist, dass der bereits gewählte Effekt nicht markiert ist. Man kann also nicht mehr nachvollziehen, für welchen Effekt man sich entschieden hat, außer man testet diese durch.

Der Umgang mit der Timeline

Die Timeline im WordPress Revolution Slider 6 ist vergleichbar mit denen aus professionellen Videobearbeitungsprogrammen. Aber keine Sorge, die Bedienung ist kinderleicht. In diesem Abschnitt erklären wir Ihnen die Zeitleiste von links nach rechts.

Links sehen Sie die einzelnen Elemente, die Sie im ersten Schritt in Ihren Revolution Slider 6 eingebunden haben. Diese bilden Ebenen. Per Drag and Drop können Sie eine Ebene nach ganz unten, ganz oben oder zwischen zwei andere Ebenen ziehen. Das ist dann wichtig, wenn Elemente überlappen sollen. Die unterste Ebene – in unserem Fall die “Ueberschrift” – liegt dementsprechend unter den anderen Elementen. Die darüber liegenden Ebenen würden diese also verdecken. Im Umkehrschluss stellt die oberste Ebene auch das oberste Element dar und so weiter.

Führen Sie die Maus über eine Ebene, erscheinen kleine Icons: ein Schloss und ein durchgestrichenes Auge. Mit dem Schloss sperren Sie die Ebene. Das dient beispielsweise dazu, dass Sie das Element nicht aus Versehen verschieben. Das durchgestrichene Auge blendet die Ebene aus. Das ist praktisch, wenn Sie Ihr Element nicht löschen wollen, aber schauen möchten, wie das Gesamtbild ohne dieses wirkt. Sie können es wieder einblenden, ohne, dass Ihre Einstellungen für das Element verloren gehen.

Der kleine Pfeil schaltet den “Wait”-Befehl aus. Dazu komme ich gleich noch.

Über den Ebenen sehen Sie ebenfalls Symbole. Davon ist ganz rechts das “Play-Symbol” das für Sie wichtigste. Spielen Sie darüber Ihren Slider ab, um Ihre Änderungen zu kontrollieren. 

Neben Ihren Ebenen sind kleine Klötze mit einer “300” abgebildet. Das bekommt jedes neue Element standardmäßig zugeteilt und bedeutet, dass das Element 300 Millisekunden für seine Eingangsanimation benötigt.

Ganz rechts sehen Sie den Wait-Befehl. Dieser dient dazu, dass Ihre Elemente nach der Eingangsanimation so lange angezeigt bleiben wie die Gesamtanimation des Sliders angelegt ist. Stellen Sie den Wait-Befehl aus, verschwindet das Element je nach Einstellung irgendwann wieder und wird dann mit einer Ausgangsanimation belegt. Ausschalten können Sie den Wait-Befehl, indem Sie auf den eben erwähnten kleinen Pfeil neben den Ebenen klicken oder indem Sie rechts auf WAIT klicken und den Kasten wegziehen.

Insgesamt ist unser Slider neun Sekunden lang, das sehen Sie oben in dem Zeitstrahl. Alles, was nach dem Fähnchen auf dem Zeitstrahl kommt, wird nicht berücksichtigt.

In unserem Beispiel sieht die Timeline nach gezielten Einstellungen wie folgt aus:

Die oberste Ebene “Slide BG Animation” stellt unseren grauen Hintergrund dar. Sie wird anfangs eingeblendet und bleibt stehen. 

Anhand der Anordnung der Balken können Sie sehen, dass nach einer halben Sekunde die Ebene “Ueberschrift” als erste eingeblendet wird und zum Schluss erst die Ebene “Katze”. Per Drag and Drop ziehen Sie den gesamten Balken weiter nach hinten, damit das Element erst später eingeblendet wird. Das machen Sie so lange, bis Ihnen Ihr Ergebnis gefällt.

Die Zahlen in den Balken sagen aus, wie viele Millisekunden das Element für die Eingangsanimation benötigt. Diese werden aus den ausgewählten In- und Out-Animationen definiert. Jeder Effekt hat bereits eine bestimmte Länge. Sie können sie aber auch händisch mit der Maus verkürzen oder verlängern, je nachdem, ob Sie möchten, dass der ausgewählte Effekt länger dauert oder eben schneller läuft. 

Wie Sie im obigen Bild sehen, hat die Ebene der Katze einen zweiten Balken. Den haben wir als Ausgangsanimation angelegt, sodass die Katze irgendwann mit einem bestimmten Effekt ausgeblendet wird. Der Balken kommt zustande, wenn Sie den Wait-Balken nach links ziehen. Das Ausblenden dauert in diesem Beispiel 2160 Millisekunden, bis die Katze vollständig verschwunden ist.

Den unteren drei Ebenen ist nach wie vor der Wait-Befehl zugeteilt. Diese Elemente bleiben stehen und verschwinden nicht aus dem Bild. Hier gibt es keine Ausgangsanimation.

Mit wenig Aufwand viel bewegen

Schon durch wenige, aber gezielte Handgriffe animieren Sie im Revolution Slider 6 das ein oder andere Element. Allein dadurch heben Sie sich von Ihrer Konkurrenz ab und gestalten den Einstieg Ihrer Webseite deutlich interessanter und professioneller. Mit ein wenig Übung anhand unseres kleinen Leitfadens und einer Hand voll guter Ideen können Sie sich schon bald an größere Animationen wagen, die vielleicht sogar Interaktionen mit dem User beinhalten. Wir wünschen Ihnen viel Spaß.

Das könnte SIe auch interssieren: WordPress Revolution Slider Tutorial für Fortgeschrittene: Sprungmarken und Links im Slider setzen

Über den Autor
Melissa Unkelbach

Melissa Unkelbach

ist ausgebildete gestaltungstechnische Assistentin und Mediengestalterin und designt mit Maus und Hirnschmalz individuelle Webseiten. Melissa ist durch ein Praktikum 2014 bei elsch&fink gelandet und hat ihre Ausbildung gleich hinterher geschoben. Seit dem gehört sie mit ihrem Husky Rusty fest zum fünfköpfigen Team. Ihr digitaler Zauberstab pustet rostigen Webseiten den Staub von der Seele, um Neues zu schaffen.

Jetzt kontaktieren

Kommentare

  1. Avatar

    Hallo, der Link zum ersten Tutorial fehlt leider oder funktioniert nicht

Hinterlasse einen Kommentar