Die beliebtesten Scroll-Animationen
Die beliebtesten und effektivsten Scroll-Effekte, um deiner Website Leben einzuhauchen und die User Experience zu verbessern.
Scroll-Animationen
Scroll-Animationen:
Grundbaustein einer jeden User Experience
autor: Shantu A. Bhattacharjee
04.09.2018Updated: 08.08.2023
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.
Der Blogcast
von
Streamen:
Wozu braucht man Scroll-Animationen?
Unsere Top Ten der Scroll-Effekte
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.
Bessere Performance auf deiner Website ... ... dank schlanker SVG-Animationen!
Fade-in- und Fade-out-Scroll-Animation
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.
Erhöhe deine Brand Awareness ...... mit 3D-Scroll-Animationen!
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.
Schöner Übergang ...... statt „lost in Transition“
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
Was sich bewegt, ist interessanter ...
Mehr über SEOUnterhaltsame, 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.
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: