Scroll-Animationen – Grundbaustein einer jeden User Experience

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.

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‘/‚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.

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.

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.

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.

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.

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.

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