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.

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

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.

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.

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