3 Website-Beispiele, wie du Besucher mit interaktiven Animationen begeistern kannst

15. Oktober 2015 von Sebastian Maier

3 Website-Beispiele, die zeigen, wie man Besucher mit interaktiven Animationen begeistern kann.

Interaktionsmöglichkeiten auf Websites sind ein hervorragendes Mittel, um Besucher neugierig zu machen und interessiert zu halten. Das geht beispielsweise über animiertes Story Telling, um den Besucher in das Thema hineinzuziehen. Eine weitere Möglichkeit sind scrollabhängige Animationen. Eine bekannte Form davon ist der Parallax-Effekt. Doch in diesem Artikel möchte ich mich mit Animationen beschäftigen, bei denen eine Interaktion durch die Bewegung des Mousezeigers hervorgerufen wird.

Bekannte Animationen dieser Art sind Hover-Effekte. Wenn der Besucher die Maus über einem bestimmten Bereich bewegt, klappt oder fährt beispielsweise ein Element auf. Eine Hover-Animation verwendet man auch gerne, um an gleicher Stelle andere Elemente anzuzeigen oder um einen Zoom-Effekt bei einem Bild hervorzurufen. Es gibt aber auch immer mehr Websites, bei denen die Maus eine Interaktion auslöst, ohne eine bestimmte Stelle zu berühren.


Bei der Website des französischen Restaurants Le Mugs

Beim französischen Restaurants LE MUGS bewegt sich das Hintergrundbild entsprechend mit der Mousebewegung

bewegt sich das Hintergrundbild entsprechend der Mousebewegung – also von oben nach unten oder von rechts nach links, auch bei kreisenden Bewegungen. Da kann einem Entwickler bei der Kontrolle des Effekts in den verschiedenen Browsern auch schon einmal schummrig werden :). Der Betrachter fühlt sich auf jeden Fall als Teil der wohnzimmerlichen und gemütlichen Atmosphäre.


Auf der Website des belgischen Kunstfestivals kikk 2015

Auf der Website des belgischen Kunstfestivals KIKK 2015 werden einzelne Elemente animiert, wenn die Mouse darüber fährt

entsteht nicht nur ein Rahmen in den Blöcken, wenn man mit der Maus darüber fährt. Es werden zudem das Innere des Rahmens und das Hintergrundbild animiert, wenn man die Mouse bewegt. Ein Effekt, der die Aufmerksamkeit des Besuchers noch stärker auf den vorgestellten Künstler lenkt.


Die gleiche Art der Animation kann man aber auch verwenden, um eine Filterfunktion in Szene zu setzen. Wie das geht, sehr ihr auf der Website der Modelagentur 62 Models.

Die Modelagentur 62 MODELS verwendet eine Animation, um eine Filterfunktion in Szene zu setzen

Fährt man mit der Mouse nach rechts, tritt der “Men”-Bereich in den Vordergrund, rückt optisch etwas mehr ins Zentrum und das dazugehörige Menü wird sichtbar. Das linke Bild tritt in den Hintergrund und wird unscharf. Umgekehrt funktioniert es natürlich genauso. Das Spiel aus Auftauchen und Verschwinden verleiht dem Webdesign einen Hauch von Mysteriösität, den der Besucher selbst auslösen kann.




Wie gefallen euch diese Designbeispiele? Welche Art der interaktiven Animation bevorzugt ihr, um Besucher interessiert zu halten? 



(Quelle Headerbild: http://le-mugs.com/)

zurück
comments powered by Disqus