Scroll-Animationen – Grundbaustein einer jeden User Experience

Wie sehr sich einfache Scroll-Animationen auf die User Experience einer Webseite auswirken, verraten wir im folgenden Artikel.

Was sind Scroll-Animationen?

 

Irrtümlicherweise werden sogenannte Scroll-Animationen oftmals auch als Scroll-Events bezeichnet, obwohl das Scrollen an sich bereits ein Event darstellt.

Bei Scroll-Animationen auf Webseiten handelt es sich um scrollbasierte Animationseffekte, die an Texte, Bilder, Symbole und Hintergrundstile gebunden sind.

Sie bilden den Grundbaustein einer gezielten User Experience, hauchen einer Website Leben ein und machen sie für den User attraktiv und erlebbar.

Seit Smartphone- und Computer-Hersteller das Scrollen revolutionierten und über Fingerbewegung ermöglichten, sind der Gestaltung von Webseiten und der Verwendung von Scroll-Animationen nur noch wenige Grenzen gesetzt. Nahezu jeder Content, ob Bilder, Texte, Videos, Icons oder Symbole, lässt sich heute drehen, bewegen, ein- und ausblenden; er wechselt die Farbe, die Richtung, die Geschwindigkeit, die Message.

 

Die beliebtesten Scroll-Animationen

Die 9 beliebtesten und effektivsten Scroll-Animationen, um deiner Webseite Leben einzuhauchen

Parallax Scrolling

Parallax Scrolling ist eine Form der Scroll-Animation, bei der sich einzelne Objekte auf verschiedenen Ebenen und in unterschiedlicher Geschwindigkeit zueinander hin oder voneinander wegbewegen. Durch diesen Effekt entsteht der Eindruck von Räumlichkeit und Tiefe. Die Verschiebung der Ebenen kann dabei an unterschiedliche Aktionen gekoppelt werden. Während man, wie üblich, von oben nach unten scrollt, ist es beispielsweise möglich, dass sich ein Parallax-Objekt während dessen von unten nach oben oder von links nach rechts bewegt.

Bekannt aus Jump-’n’-Run-Computerspielen fand die Bewegungsparallaxe als Stilmittel, mithilfe von HTML und CSS um 2008 seinen Einzug ins Internet und erlebte 2013 einen echten Boom.

Komplexere Parallax-Scrolling-Webseiten setzen in der Regel auf die Skriptsprache JavaScript oder das JavaScript-Framework jQuery.  – Vorteil: Diese müssen nicht neu programmiert werden, da es auf Plattformen wie GitHub.com diverse Softwareprojekte gibt, die Parallax-Effekte als leicht integrierbare Skripte/Plug-ins zur Verfügung stellen.

Sticky Scroll Animation

Unter ‚Sticky-Elementen‘ versteht man Webseiten-Elemente wie beispielsweise Boxen oder Header-Elemente, die ihren Platz während des Scrollens beibehalten, während sich der Rest der Seite bewegt.

Gerade ein Sticky-Header bietet den Vorteil der kontinuierlichen Sichtbarkeit einer Marke oder eines Logos. Auch die Navigation bleibt stets im sichtbaren Bereich und ihre Funktionen jederzeit erreichbar.

Fade-in und Fade-out

‚Fade-in‘/‚Fade-out‘ beschreibt das sanfte Ein- und Ausblenden eines Webseiten-Contents, das bei jedem neuen Seitenaufruf generiert wird. Dies kann beispielsweise ein Text sein, der sich langsam entwickelt oder ein Bild, welches zunehmend in der Dunkelheit verschwindet.

Slide Scroll Animation

Als ‚Slide-in‘/‚Slide-out‘ bezeichnet man Content, der meist seitlich ins bestehende Bild gleitet. Ein Effekt, den man häufig für Werbezwecke in Form von erscheinenden Content-Boxen wie Newsletter-Anmeldungen oder Cookie-Hinweisen benutzt.

3D Perspective Scrolling

Der Perspektiv-Effekt umfasst ein dreidimensionales Scroll-Erlebnis, bei dem sich ein einzelnes Objekt während des Scrollens um seine X-Achse dreht und ganzheitlich präsentiert. Dieser Effekt wird meist zur detaillierten Präsentation neuer Produkte genutzt und gerne um ein +Zoom-Fenster ergänzt, welches via Mouseover erscheint.

Scrollaktivierte Video-Animationen

Durch das Herunterscrollen können eigene Animationen ebenso wie in die Webseite eingebundene Videos ausgelöst werden. Google unterstützt hierbei die automatische Aktivierung von YouTube-Videos, sobald diese ins Sichtfeld eines Users gelangen.

Staggering Scroll Animation

Bei Staggering-Animationen handelt es sich um eine Aneinanderreihung einzelner Animationen, die nacheinander aktiviert werden. Die Darstellung der einzelnen Elemente  kann sich dabei teilweise oder vollständig überschneiden.

Flip Scroll Animation

Durch das Scrollen können sogenannte Flip-Animationen aktiviert werden, bei denen es sich um Elemente handelt, die sich von ihrer Vorder- auf die Rückseite und wieder zurück drehen können. Zu vergleichen ist dies mit einem digitalen Coin Flip, also einem Münzwurf. Die Geschwindigkeit dieser Wendung kann dabei der Scrollgeschwindigkeit angepasst werden.

Zoom-in und Zoom-out Scrolling

Ebenfalls ein beliebter Effekt ist das scrollaktivierte Zoomen, bei dem einzelne Elemente durch das Herunterscrollen vergrößert und wieder verkleinert werden.

„Eine Website lebt von den Usern, die sie benutzen.“

Shantu Bhattacharjee
Geschäftsführer