Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Sonnenseiten: Activate!

Sonnenseiten: Activate!

Animationen werden im Web oft als überflüssig erachtet oder als Spielerei abgetan. Aber richtig eingesetzt kann ein wenig Bewegung die Botschaft einer Webseite verstärken und den Inhalt unterstützen, wie Christoph Zillgens am Internetauftritt von »Activate!« sehr schön zeigt.

Die Webseite zum Event Activate! passt wunderbar zum Thema Sonnenseiten. Nicht nur wollen die Veranstalter die Webworker in der Sommerzeit mal vom Schreibtisch weg in die freie Natur einladen – was an sich schon eine tolle Idee ist. Sie tun auch mit einer ansprechenden modernen Webseite einiges dafür, ihre Besucher vom Spaßfaktor des Events zu überzeugen: Flippige Typografie, bunte Illustrationen, kräftige Farben und ganz besonders zwei witzige Animationen machen Lust, selbst aktiv zu werden und am Event teilzunehmen.

Screenshot: preparetoactivate.com

Die Animationen wurden rein mit CSS erstellt, kein Javascript, kein Flash! Wie das geht? Es ist gar nicht so schwer, sehen wir uns die Erstellung der Seilbahn-Animation einmal genauer an: Das Männchen fährt leicht schräg abwärts, außerdem schaukelt es dabei leicht hin und her. Diese beiden Bewegungen müssen wir zunächst im CSS als Animation definieren. Anschließend wählen wir das gewünschte Element aus, auf das die Animation angewendet werden soll, in unserem Fall das Bild des Männchens (img-Element).

Die Animation definieren

So sieht das entsprechende Code-Schnipsel in der CSS-Datei aus:

@keyframes zipWire { 0% { top: -74px; left: -42px; transform:rotate(-30deg); } 40% { top: 113px; left: 1740px; transform:rotate(20deg); } 100% { top: 113px; left: 1740px; transform:rotate(20deg); } }

(Hinweis: Zur besseren Übersichtlichkeit wird in den Code-Beispielen auf Präfixe (-webkit-, -moz-) verzichtet. Damit die Animation in den Browsern funktioniert, müssen sie entsprechend für die transform- und animation-Eigenschaften ergänzt werden.)

Mit der »@keyframes«-Regel wird die Animation definiert, die einen willkürlichen Namen enthält, in dem Fall »zipWire«. Innerhalb der Regel kann man bestimmte Schlüsselbilder (keyframes) definieren, hier gibt es drei bei 0%, 40% und 100% des Animationsverlaufs. Im ersten Schlüsselbild wird also die Startposition angegeben, außerdem wird das Männchen mittels transform:rotate() etwas gedreht, in diesem Fall 30° gegen den Uhrzeigersinn, ausgehend von der Senkrechten. Nach 40% der Animationsdauer ist das nächste Schlüsselbild gesetzt, mit veränderten Werten für die Position und den Winkel. Das heißt also, dass das Männchen zwischen Schlüsselbild 1 bei 0% und Schlüsselbild 2 bei 40% die angegebene Strecke zwischen den Punkten zurücklegt und den Winkel verändert, wodurch das leichte Schwingen entsteht.
Zwischen Schlüsselbild 2 und Schlüsselbild 3 bei 100% ändern sich keine Werte, es passiert also nichts, das Männchen erhält hier eine kleine Verschnaufpause (versteckt hinterm Felsen), bevor die Animation von vorne startet.

Die Animation zuweisen

Im zweiten Schritt muss nun die Animation zugewiesen werden. Hier der dafür zuständige Code:

#wire #wireFigure { animation-name: zipWire; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: linear; }

Dem Bild des Männchens (#wireFigure) wird also die Animation »zipWire« zugewiesen mit animation-name. Die weiteren Eigenschaften sind die Dauer, hier 10 Sekunden, die Anzahl der Wiederholungen, hier unendlich. Mit der animation-timing-function lässt sich die Geschwindigkeit während des Verlaufs der Animation beeinflussen. Hier bleibt sie dank des Wertes linear stets konstant. Damit wäre es bereits geschafft und unser Männchen kann Seilbahn fahren.

Fazit

Ohne viel Arbeit ist eine nette Animation erstellt, die die Activate-Webseite treffend und humorvoll bereichert. Betrachtet werden kann das ganze Safari, Chrome und Firefox 5: preparetoactivate.com

Zur Aktion

Dies ist ein Text zur Aktion Sonnenseiten: Webkrauts loben – höchst subjektiv – einzelne Details von Webseiten. Entgegen unserer Gewohnheit steht diesmal nicht der Quelltext, sondern die Idee im Mittelpunkt.

Kommentare

Andreas
am 03.08.2011 - 11:35

Hallo,

super Artikel, da steckt wirklich viel Mühe drin und zum Nachmachen eignet sich das Ganze auch noch gut :)

Vielen Dank!

Permanenter Link

Nina Gerling
am 03.08.2011 - 12:25

Ein angenehm einfach erklärtes Beispiel wie einfach man mit diesen Techniken nette Effekte zaubern kann. Das Schöne daran ist auch, dass die Seite bei Browsern die diese Technik nicht unterstützen dennoch sauber aussieht - der Nutzer merkt also gar nicht, dass ihm etwas entgeht :)

Permanenter Link

nanoware media ...
am 13.08.2011 - 18:07

Super. Solche Effekte kann man nur "lesen" und sich schwer selbst ausdenken. Danke für das gute Beispiel.

Permanenter Link

Helena
am 27.08.2011 - 16:29

Wow, ich wusste gar nicht, dass das so einfach ist. Echt genial, danke für den Artikel!

Permanenter Link

Die Kommentare sind geschlossen.