Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt
Sie befinden sich: Startseite » Webdesign verstehen und anwenden » Bilder animieren

Bilder einfach animieren – Spieltrieb wecken

Deutlich mehr Möglichkeiten als bei Druckmedien haben wir bei Websites über Animationen (die in gedruckter Form nur schwer darzustellen sind). Wir können mit ein paar Zeilen CSS3-Code Animationen schaffen. Die Frage ist natürlich als erstes: Warum sollte man das machen?

Wenn wir es schaffen, den Spieltrieb im Mensch zu wecken, wird der Website deutlich mehr Aufmerksamkeit geschenkt. Kleine und feine Animationen (bitte mit Sinn und nicht marktschreierisch) können Besuchern ein Lächeln auf die Lippen zaubern oder auch einfach nur Möglichkeiten verdeutlichen. Der Spieltrieb ist einfach über Nutzeraktionen und Animationen weckbar. Der nächste Schritt nach dem Wecken von Neugier und Spieltrieb ist Gamification. Aber eins nach dem anderen. Hier beschäftigen wir uns erst einmal mit dem Spieltrieb.

Einige versuchen es auf die Variante „suche ein Element“, dass wir immer wieder auf der Website mehr oder weniger offensichtlich versteckt haben (beispielsweise ein Biertischhersteller und seine Katzen). Wir wollen uns ansehen, wie wir den Spieltrieb über technische Möglichkeiten anfeuern können. Dazu gehört, dass der Besucher etwas tun muss (ohne Fleiß, kein Preis). Und wenn das Tun nur durch das Fahren der Maus getan ist.

So können wir zum Beispiel Bilder, die am Anfang von Texten als Eyecatcher dienen, sehr einfach über CSS3 animieren. Fährt der Besucher nun mit der Maus über das Bild (meistens sind die Bilder groß genug, dass dies sehr wahrscheinlich passiert), wird das Bild animiert und der nicht darauf gefasst Besucher ist (hoffentlich) positiv überrascht.

Hier gibt es einfache Animationen, dass das Bild gezoomt oder ausgezoomt wird, eingefärbt wird oder tanzt und springt und singt (was definitiv Zuviel des Guten ist).

Bild vergrößert sich bei Mausberührung

Bildanimation - vergrößern bei Mausberührung

Beispielanimation: Bild verkleinert sich bei Mausberührung

Bildanimation - verkleinern bei Mausberührung

Bei dem folgenden Beispiel, dreht sich das Bild bei Mausberührung. Je nachdem, wo der Mauscursor sitzt, gibt es lustige Effekte und das Bild will wieder in seine Ausgangslage und springt zwischen 2 Zuständen.

Beispielanimation: Zuviel des Guten

Bildanimation - drehen bei Mausberührung

Oder auch einfach eine Einfärbung des Bildes mit einer gewählten Farbe:

Katze einfärben bei Mausberührung

Bildanimation - schlafende Katze wird Orange

Noch besser ist es natürlich, wenn die Animation etwas mit dem Ziel der Webseite zu tun hat. Haben wir eine Telefonsupport-Seite, dann ist es naheliegend, dass der Mitarbeiter das Telefon zum Ohr nimmt (ich weiß schon, dass es Headsets gibt – aber das mag mein Kater nicht!).

animierter Mitarbeiter beim Schlafen/Telefonieren - gimme a call

Bildanimation - Katze greift zum Telefonhörer

Animationen mit Mehrwert!

Wenn wir es schaffen, die Animation und den Spieltrieb mit einem Mehrwert zu versehen ist es um so besser. Gibt es beispielsweise bei einer Produktübersichtsseite zu Produkten weitere Detailseiten, dann wäre doch schön, wenn nicht nur ein Link in Form von „zur Detailseite“ vorhanden ist.

Also versehen wir ein vorhandenes Produktbild mit Text, der erst mit Mausberührung auftaucht. Und wird dann das Bild noch als Link zur Detailseite ausgebaut, hat der Besucher einen Mehrwert und klickt gerne.

Zumal ein Bild meistens größer ist als ein Link und somit besser per Maus anklickbar ist, als ein kleiner Link.

Im folgenden Beispiel wird der Text auf 2 verschiedene Arten eingeblendet. Wie sanft oder hektisch die Effekte erstellt werden, ist eine Umsetzungsgeschichte. Wir können alle Effekt in Geschwindigkeit und Wirkung anpassen.

Bitte bei dem folgendem Beispiel über das Bild mit der Maus fahren. Es ist noch keine Detailseite hinterlegt (das folgende Beispiel dient zur Veranschaulichung).

animiertes (sanft) Produktfoto als Link zur Detailseite - Bild wird bei Mausberührung vergrößert, abgedunkelt und ein Text erscheint

Bildanimation - Texteinblendung bei Mausberührung

klicken für Details

Uns hilft also der gezielte Einsatz von Animationen um den Benutzer „bei Laune zu halten“ bzw. im ersten Schritt den Spieltrieb zu wecken. Daher gehört zum Erstellen eines Designs auch die Überlegung, welche Animationen sollen mit Integriert werden. Es ist schon klar, dass Designer vom alten Schlag damit erst einmal Probleme bekommen, da diese meistens von gedruckten Medien ausgehen und da keine zeitliche Dimension haben (sprich der zeitliche Ablauf bei Animationen).

Also Mut zum spielerischen Umgang mit Design und Benutzer – auch wenn die Website inhaltlich eher eine trockene Materie vermittelt.

Weiterempfehlen • Social Bookmarks • Vielen Dank

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Vielen Dank für Ihre Hilfe

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details