CSS Animation - Werbebanner zu den Olympischen Spielen 2012 in London

CSS Animation - Olympischen Spiele - London 2012Im Online-Marketing stellen Werbebanner eine der Möglichkeiten dar, Produkte oder Dienstleistungen zu bewerben. Entweder, wie in den meisten Fällen bisher üblich mittels Flash, statisch als Grafik oder auch als animierte Grafik. Um darüber relevanten Traffic zu generieren, muss ein solches Werbemittel entweder mit einem (unschlagbaren) Angebot überzeugen und darüber die Bedürfnisse des Betrachters wecken oder aber, der Banner überrascht mit seinem Design und macht den Betrachter schlicht und ergreifend einfach neugierig. Allerdings leiden insbesondere die animierten Grafiken oftmals darunter, dass sie entweder altbacken wirken oder insbesondere bei mobilen Endgeräten wie Smartphones oder Tablets entweder gar nicht angezeigt werden (weil sie von Apple-Produkten auf diesen Devices nicht unterstützt werden), oder auf Retina Displays unglaublich unscharf wirken. Wer meinen Blog hier kennt, weiß was jetzt kommt - CSS3 bietet einen "Ausweg" und zwar bspw. auf Basis des CSS Animation Modules.

Strukturelle Grund der CSS Animation

Anlass der folgenden kleinen und ausschließlich auf CSS basierenden Animation sind die immer wieder aufkommenden Diskussionen über die Möglichkeiten mit CSS3 und natürlich das momentan sehr aktuelle Thema, die "Olympischen Spiele 2012 in London". Es gibt kein Step-by-Step Tutorial, in dem jeder einzelne Schritt einer Animation anhand der jeweiligen CSS Eigenschaften beschrieben wird, sondern lediglich eine Art Inspiration dafür, was allein auf Basis von CSS möglich ist. Daher sei an diese Stelle kurz erwähnt, dass der folgende CSS Werbebanner ohne jegliche Grafiken auskommt. Aufgrund der Möglichkeiten der entsprechenden CSS Eigenschaften besteht der HTML-Code, auf den an dieser Stelle nicht näher eingegangen wird, aus einer Überschrift und zwei Listen. Wobei eine Liste auf die zahlreichen Gebäude der Skyline Londons zurückzuführen ist und die andere ungeordnete Liste, die strukturelle Grundlage der fünf olympischen Ringen bildet.

CSS Animation

Wen die bildliche Beschreibung des Ablaufes dieser Animation weniger interessiert, der kann das Ganze auch abkürzen. Denn mit einem Klick auf den "Demo-Button" gelangt ihr ohne grosse Umwege zur CSS Animation.

CSS Animation des Banners - Der zeitliche Ablauf

Visuelle Grundlage dieses CSS basierten Banners, ist eine mittels einer Liste und 25 Listenpunkten (stehen für die verschiedenen angedeuteten Gebäude). Diese werden initial angezeigt, während die folgenden Inhalte erst nach dem Start der Animation sichtbar werden.

initialer Zustand der AnimationAbb. 01: initialer Zustand der Animation (Zeitpunkt: 0 Sekunden)

Der erste sichtbare Effekt dieser CSS Animation liegt in der zeitlich nacheinander ablaufenden animierten Einblendung der fünf verschiedenen olympischen Ringe. Diese sollen am Ende der CSS Animation oben links im Banner positioniert sein und werden daher von oben rechts kommend, eingeblendet.

Animationszeitpunkt nach 0,5 SekundenAbb. 02: Position des blauen olympischen Ringes (Zeitpunkt: 0,5 Sekunden)

Jeder der fünf Ringe hat für das Einnehmen seiner Position mittles des CSS Animation Modules und der dafür zur Verfügung stehenden Eigenschaft animation-duration, jeweils 1,5 Sekunden Zeit.

Animationszeitpunkt nach 1,0 SekundenAbb. 03: Position des blauen olympischen Ringes (Zeitpunkt: 1,0 Sekunden)

Das heißt, in dieser Zeit bewegt sich der jeweilige Ring von rechts außerhalb des Bannerbereiches, in seine für ihnvorgesehene Position oben links.

Animationszeitpunkt nach 1,5 SekundenAbb. 04: Position des blauen olympischen Ringes (Zeitpunkt: 1,5 Sekunden)

Nach Adam Rise führt die Animation nach Ablauf von 4,5 Sekunden und dem Einblenden von den drei olympischen Ringen in der oberen Reihe, zu folgendem Zustand.

Animationszeitpunkt nach 4,5 SekundenAbb. 05: Darstellung der olympischen Ringe (Zeitpunkt: 4,5 Sekunden)

Nach weiteren drei Sekunden ist dann auch die zweite Reihe an seinem angestammten Platz angekommen.

Animationszeitpunkt nach 7,5 SekundenAbb. 06: Darstellung der olympischen Ringe (Zeitpunkt: 7,5 Sekunden)

Als weiteres animiertes (hoffentlicht erkennbares) Merkmal der britischen Metropole, wurde das London Eye mit in diese CSS Animation eingebunden. Dieses wird nach der "Fertigstellung der Olympischen Ringe" von links in den CSS Banner hineingerollt.

Animationszeitpunkt nach 8,0 SekundenAbb. 07: Hereinrollen des Riesenrades (Zeitpunkt: 8,0 Sekunden)

Dieser, wie alle anderen Listenpunkte absolut ausgerichtete Teil der Skyline, rollt im weiteren Verlauf seiner Animation an seinen für ihn angestammten Platz.

Animationszeitpunkt nach 8,5 SekundenAbb. 08: Endgültige Position des Riesenrades (Zeitpunkt: 8,5 Sekunden)

Damit auch der letzte Betrachter dieses Banners weiß worum es sich handelt, wird dem Banner am Ende noch der Slogan "London 2012 Olympic Games" hinzugefügt. Dieser wird in der letzten Sekunde der Animation von rechts eingeblendet...

Animationszeitpunkt nach 9,0 SekundenAbb. 09: Einblenden des Slogans von rechts (Zeitpunkt: 9,0 Sekunden)

... und erreicht nach 1 Sekunde seinen angestammten Platz, womit diese CSS Animation beendet wäre.

Animationszeitpunkt nach 9,5 SekundenAbb. 10: Endgültige Position des Slogans (Zeitpunkt: 9,5 Sekunden)

Für all diejeinigen die sich mit Sport und hier insbesondere mit Leichtathletik auskennen, wissen was diese Zeit von 9,5 Sekunden bedeutet - Weltrekord auf 100m (bei den Männern).

CSS Animation

Nicht nur bei der Erstellung von Bannern stellt sich wie so oft die Frage des Kosten-Nutzen-Aufwandes. Der zeitliche Aufwand für die doch relativ einfache CSS Animation beläuft sich auf etwa 1,5 bis 2h. Diese Animation wäre relativ leicht in ihren Ausmaßen und der Farbgebung modifizierbar. In Bezug auf die Umsetzung der "Skyline", wäre diese Idee bspw. ideal für Reiseportale, auf denen man mit einer solchen "Skyline" andere Städte mit signifikanten Merkmalen (bspw. Paris, Berlin, Rio de Janeiro) bewerben könnte. Wer dies bezüglich Fragen für eine mögliche Umsetzung hat, kann sich gern bei mir melden.

Browser-Support

Auch wenn dieser CSS animierte Banner noch nicht auf allen Browsern läuft (Ausnahme ist bisher der Internet Explorer), kann sich die Unterstützung dieses CSS Beispiels durch die Browserhersteller durchaus sehen lassen, denn neben den webkit-basierten Browsern Safari und Google Chrome, sind auch der Firefox und Opera zur korrekten Umsetzung dieser, durch die Olympischen Spiele in London 2012, inspirierten Animation in der Lage.

CSS Browser-Support - CSS3 AnimationBrowserunterstützung des CSS3 Animation Module (Stand 07/12)

Anmerkung: Dieser Artikel soll nicht zur Grundlage einer erneuten Diskussion über Sinn und Zweck der Gestaltung von Inhalten und ihrer semantischen HTML-Struktur werden, sondern lediglich (und das möchte ich an dieser Stelle deutlich hervorheben) inspirieren!

In diesem Sinne, auf interessante, faire und friedliche Olympische Spiele 2012 in London!

Artikel zur zum Thema CSS Animation
  1. Frank 27 Jul 2012, 09:49

    Klasse Idee! Fehlt eigentlich nur noch Big Ben, wobei der sicherlich etwas schwieriger umsetzen gewesen wäre.


  2. Svenny 27 Jul 2012, 22:07

    Wow! Bisher habe ich hierfür auf GIF-Animationen zurückgegriffen, aber die Idee hier bietet wirklich interessante Möglichkeiten. Danke für den Gedankenanstoss!


  3. Simone 30 Jul 2012, 09:11

    Diskussionen darüber, ob es Sinn macht eine solche Animation ausschließlich mit CSS zu realisieren, finde ich nutzlos. Sie sind in erster Linie inspirierend und das ist ja das Hauptanliegen dieses Beispiel. Ich fände es im übrigen auch klasse, wenn die einzelnen Gebäude noch animiert eingeblendet würden ;o)


  4. Richard 08 Aug 2012, 12:01

    Respekt! Ich finde das ist echt eine klasse Idee. Ich persönlich hätte die Tower Bridge ebenfalls animiert, aber das wäre nur so eine kleine Spielerei meinerseits gewesen ;) Vielen Dank!


  5. Webstandard-Team
    08 Aug 2012, 12:08

    @Richard: Danke für dein Kompliment. Die Animation der Zubrücke war auch ein Gedanke von mir. Da diese Elemente allerdings mit Pseudoelementen wie :after umgesetzt wurden und manche Browser mit der Animation dieser Elemente Schiwerigkeiten haben, habe ich davon abgesehen.


  6. LellaBella 15 Aug 2012, 15:32

    Wirklich eine praktische Methode um Animationen in Netz bereit zu stellen!
    Danke für die ausführliche Beschreibung
    g*


  7. Akne 16 Aug 2012, 17:56

    Die Idee ist echt super. Wie du schon sagtest kommen Banner nicht so gut rüber auf einem Smartphone. Aber CSS würde viele Probleme dabei lösen.


Artikel kommentieren





HTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""></a> <b></b> <cite></cite> <code></code> <em></em> <strong></strong>


authimage