Scroll-Animationen

Webdesign

Webdesign

Scroll-Animationen:
Grundbaustein einer jeden User Experience

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

Bei Scroll-Animationen auf Webseiten handelt es sich um scrollbasierte Animationseffekte, die an Texte, Bilder, Symbole und Hintergrundstile gebunden sind. Daher sind sie auch unter dem Begriff ,Scroll-Effekte‘ bekannt.

Sie bilden den Grundbaustein einer gezielten UX, hauchen einer Website Leben ein und machen sie für den User attraktiv und erlebbar. Wie sehr sich einfache Scroll-Animationen auf die UX einer Webseite auswirken, verraten wir im folgenden Artikel.

Themenübersicht

Der Blogcast
von
logo
Streamen:
Lineart Illustration eines Fragezeichens – Magenta Pink
Wozu braucht man Scroll-Animationen?

Seit Smartphone- und Computer-Hersteller das Scrollen revolutionierten und über eine 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.

Unsere Top Ten der Scroll-Effekte

BEST OF

BEST OF

Die beliebtesten Scroll-Animationen

Die beliebtesten und effektivsten Scroll-Effekte, um deiner Website Leben einzuhauchen und die User Experience zu verbessern.

Parallax-Scroll-Animation

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 zog die Bewegungsparallaxe als Stilmittel, mithilfe von HTML und CSS um 2008 ins Internet ein, 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.

Beitragsbild zum Insight SVG-Animationen erobern als Dateiformat das Web und lassen sich als Illustration von Motion Designern leicht erstelle
Bessere Performance auf deiner Website ... ... dank schlanker SVG-Animationen!

Logo-, Lade- und interaktive Animationen fördern die Verweildauer und Interaktionsrate von Usern erheblich. Allerdings lädt deine Website bei großen GIF-Animationen die Inhalte sehr langsam. Das passiert nicht, wenn du schlanke SVG-Vektoranimationen verwendest.

Lies mehr dazu in unserem Insight!

Fade-in- und Fade-out-Scroll-Animation

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-Perspectiv-Scroll-Animation

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.

3D-Scroll-Animationen
Beitragsbild Insight reusable code zum Stichpunkt modularität
Erhöhe deine Brand Awareness ...... mit 3D-Scroll-Animationen!

3D-Scroll-Animationen sind relativ neu im professionellen Webdesign. Aufgrund ihrer dreidimensionalen Komplexität ist nicht jede Internetagentur in der Lage, eine 3D-Scroll-Animation umzusetzen. Wir aber schon! Melde dich bei uns, wenn wir dich unterstützen können!

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.

Illustration von zwei Puzzleteilen, die symbolisch die Single Page Application als technischen Webdesigntrend darstellen..
Schöner Übergang ...... statt „lost in Transition“

Die Page Transition ist ein besonderer Webdesign-Effekt. Wie sehr sich einfache Page Transitions bzw. Seitenübergänge auf die UX deiner Webseite auswirken, verraten wir in unserem Artikel „Page Transitions – ein wichtiger Grundbaustein in der User Experience“.

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.

Horizontale Scroll-Animation

Horizontales Scrollen ist der kreative Hingucker im Professionelles Webdesign. Während Scroll-Animationen in der Regel darauf ausgerichtet sind, eine Website vertikal zu scrollen, gilt horizontales Scrolling in der Professionellen Webentwicklung als Variante, umfangreiche Inhalte auf einem engen Platz darzustellen.

Besonders auf Touchscreen-Geräten wirkt das horizontale Wischen von links nach rechts natürlich und flüssig – wie bei Computerspielen, wo es den Spielern die Möglichkeit bietet, das gesamte Spielfeld zu überblicken. Die horizontale Scroll-Animation ist für bestimmte Inhalte und experimentierfreudige User ein attraktives Angebot mit einem hohen Alleinstellungsmerkmal.

Gamification ist Trend

FAZIT

FAZIT

Was sich bewegt, ist interessanter ...

Mehr über SEO

Unterhaltsame, scrollbasierte Effekte machen eine Website interessant und erlebbar. Die oben gezeigten unterschiedlichen Scroll-Animationen sind inzwischen fester Bestandteil der Gamification; sie beeinflussen die User Experience von Nutzern erheblich.

Werden die Besucher deiner Website durch deinen Content gut informiert und dabei auch noch spielerisch unterhalten, bleiben sie länger auf deiner Site – und sie kommen sogar wieder. Das ist dann wieder sehr gut für dein Ranking.

Scroll-AnimationenDas war die Theorie. Wenn du Lust hast, ...

… schau dir doch ein paar Webseiten an, auf denen Scroll-Effekte zum Einsatz kommen! Ein paar gelungene Beispiele von Scroll-Animationen haben wir in unserem Insight „Die 10 schönsten Scroll-Animationen“ für dich zusammengestellt.

Scroll dich mal so richtig rein!

Melde dich bei uns!

„Deine Website lebt von den Usern, die sie besuchen. Biete ihnen mit einer guten Page Experience einen Mehrwert und sie kommen immer wieder.“

Scroll nicht weiter!

Hier bist du richtig!
Tel. +49 30 40045775

Hier findest du themenverwandte Artikel:

insights

insights