Hover Animations – der neue Hingucker für Websites

Auf einer ständig steigenden Anzahl von Websites wird mit sogenannten Hover Animations gearbeitet. Dabei handelt es sich um eine spezielle Art der Erzeugung von Aufmerksamkeit, durch welche der Blick des Besuchers gezielt auf einzelne Elemente und Inhalte einer Website gelenkt werden kann. Die Animationen werden dann automatisch aktiv, wenn ein vom Programmierer und Webdesigner konkret angegebener Bereich einer Website mit dem Mouse-Pfeil überfahren wird. Das heißt, dass die Website beim Aufruf statisch zu sein scheint, aber bei Nutzeraktionen dynamischen Charakter bekommt.

Für welche Inhalte eignen sich Hover Animations?

Grundsätzlich kann diese Technik des Webdesigns für alle Arten von Informationen eingesetzt werden. Doch es gibt einige Dinge, für welche die Hover Animations förmlich prädestiniert sind. Zwei Beispiele dafür sind Balkendiagramme oder grafisch dargestellte Chroniken. Sie prädestinieren dem Betrachter die Informationen sozusagen Stück für Stück, womit die für den Menschen typische Neugier zur Verlängerung der Verweildauer auf einer Website ausgenutzt wird. Sie gehört noch immer zu den von den Google-Algorithmen verwendeten Rankingfaktoren.

Welche Optionen sind bei den Hover Animations nutzbar?

Als Basis können die Webdesigner fünf verschiedene Optionen beispielsweise für die Erstellung von animierten Balkendiagrammen verwenden. Dabei handelt es sich um folgende Varianten:
* „ease“ = Der Balken verlängert sich zu Beginn überdurchschnittlich schnell und wird zum Ende hin sehr langsam.
* „ease-in-out“ = Der Balken wächst zu Beginn langsam, wird in der Mitte schneller und verlangsamt sich zum Ende hin wieder.
* „ease-in“ = Der Balken beginnt sein Wachstum langsam und wächst zum Ende hin immer schneller.
* „ease-out“ = Der Balken startet mit Normalgeschwindigkeit und wird zum Ende hin langsamer.
* „linear“ = Der Balken wächst über die gesamte Länge hin mit konstanter Geschwindigkeit.

Bei den Hover Animations haben Webdesigner außerdem die Möglichkeit, individuelle Geschwindigkeiten für bestimmte Bereiche mit dem Befehl „cubic-bezier“ und der Angabe konkreter Koordinaten zwischen 0,0 und 1,1 zuzuweisen. Das gilt nicht nur in Bezug auf die Balkendiagramme, sondern kann auch bei der Umwandlung, Verschiebung und Rotation von Grafiken angewendet werden.

Die Hover Animations und der Header einer Website

Traditionell wendeten Webdesigner die Slider-Technik für die Gestaltung veränderlicher Header einer Website an. Doch auch beim Header haben inzwischen die Hover Animations Einzug gehalten. Noch (Stand September 2016) gibt es allerdings nur sehr wenige Themes für die Content Management Systeme, von denen diese Technik unterstützt wird. Interessant ist sie allemal, weil der Trend mittlerweile zu bildschirmfüllenden Headergrafiken geht. Wer seinen Nutzern eine gute Usability bieten möchte, lässt mit der Hover-Technik die Grafik beim Überfahren verschwinden und bringt einen inhaltlichen Überblick oder besondere Hinweise (z.B. auf Sonderangebote oder temporäre Aktionen) zum Vorschein. Sie rücken allein schon durch die animierte Anzeige in den Blickpunkt der Nutzer.

Welche Effekte können mit den Hover Animations noch erzielt werden?

Die Grenzen dieser Art des bewegten Webdesigns sind mit den vorgestellten Varianten nicht erreicht. Es gibt eine ganze Reihe anderer Dinge, die damit bewirkt werden können. Dazu zählen beispielsweise:
* Einzoomen
* Auszoomen
* Verändern der kompletten Bildgröße
* Schatteneffekte
* Verändern der Ränder inklusive der Randverzerrung
* Kippen und Rotieren der Grafiken
* Verschieben der Grafiken
* Ändern der Deckkraft der Farben
* horizontale und vertikale Spiegelung

Darüber hinaus können Schriftzüge mit der Hover-Technik zum Leuchten oder zum Verblassen gebracht werden. Außerdem lässt sich eine Standardschriftart in eine 3D-Schriftart verwandeln. Mit verschiedenen Zusatzoptionen können Schriftzüge über Grafiken gelegt werden, um so die Aufmerksamkeit des Betrachters zu erregen. Kurz gesagt: Die Hover Animations sind eine gute Möglichkeit, auf einer Website für Bewegung zu sorgen, ohne dabei JavaScript, Frames oder Container einsetzen zu müssen.

Unsere Experten im Webdesign und Online Marketing helfen Ihnen gerne weiter.