Manche Unternehmen haben mehr Anspruch an eine Website als nur das Anzeigen von Inhalten - sie möchten dem Nutzer eine Erfahrung bieten. Eine Möglichkeit den Nutzer zu fesseln ist Scrollytelling. Scrollytelling ist eine digitale “Erzähltechnik”, bei der Inhalte und Geschichten durch das Scrollen auf einer Website interaktiv enthüllt werden. Diese Methode nutzt dynamische Animationen und visuelle Effekte, um eine außergewöhnliche Nutzererfahrung zu schaffen. Das CMS Webflow eignet sich besonders gut für die Erstellung von Scrollytelling Websites, da mit den integrierten Animationsmöglichkeiten Scroll-Effekte auch von Einsteigern erstellt werden können.
In diesem Blogbeitrag möchte ich Dir die 10 besten Scrollytelling Websites vorstellen. Manche vorgestellte Seiten sind wirkliche Webexperiences, manche arbeiten eher dezenter mit Scrollytelling.
Cula Tech
Crazy Website mit Snapscroll, welche von der Webflow Agentur Refokus entwickelt wurde. Das eher trockene und theoretische Thema von CO2-Zertifikaten wurde in eine spannende und interaktive Website umgewandelt. Besonders sticht die 3D-Welt hervor, welche auch direkt aus einem Videospiel stammen könnte. Allgemein hat man nicht das Gefühl auf einer Website zu sein, man saugt die Informationen quasi auf.
Hier sieht man deutlich, welches Potential Webflow in der Theorie mit sich bringt.
MOON Project
Im Vergleich zu Cula Tech arbeitet das MOON Projekt eher mit dezenteren Scroll Animationen. Die Seite wirkt sehr hochwertig und durchdacht. Das Scrollytelling verleiht eine besondere Note, wodurch die Seite auf jeden Fall im Gedächnis bleibt.
Die Seite erinnert von Stil und Konzept sehr stark an Apple, wirkt aber auf keinen Fall wie eine billige Kopie - eher wie ein kleiner hübscher Bruder.
https://moon-project.webflow.io/
Haunted House Outlanders
Das Haunted House Outlanders von Immersive Studios bietet wieder eine komplette Weberfahrung. Passend zum Thema Scrollytelling wird eine wirkliche Geschichte erzählt, welche von ChatGPT geschrieben wurde. Der Fokus liegt aber ganz klar auf dem 3D-Render des Hauses.
Die Seite hat keine kommerziellen Absichten - Du kannst das Projekt sogar in Webflow klonen und als Basis für Deine eigenen Projekte verwenden.
https://webflow.partnerlinks.io/hauntedhouse*
ARQITEL
“With a continuous 3D animation, we showcase ARQITEL approach and show how migration data translates into real estate.” ist die Aussage zu diesem Projekt von der Refokus Agentur, welche die Website in Webflow entwickelt hat.
Durch die 3D-Animation erweckt ARQITEL ein relativ theoretisches und technisches Thema für den Nutzer zum Leben. Man fühlt sich fast als könnte man die Animation anfassen.
Him and Hers Clone
Ein Webflow Clonable perfekt für den Launch eine App. Die Seite ist spielerisch und farbenfroh. Fülle die Seite mit Deinen eigenen passenden Assets und Du kannst selbst eine Webexperience für Deine Nutzer in Webflow erschaffen.
https://webflow.partnerlinks.io/hims-and-hers*
Spaces Urbanistic
Ideal für Architektur- und Immobilienwebseiten, Du kannst die Seite direkt in Webflow klonen und als Basis für Dein nächstes Webflow Projekt verwenden. Diverse Effekte verleihen der Seite zusätzlichen Pepp.
https://webflow.partnerlinks.io/Spaces-Urbanistic-Scroll*
Mike L. Murphy
Eine Portfolio-Website für einen Experten in Animation und Content-Erstellung, die mit vertikalem Scrollen arbeitet und ein Kinogefühl erzeugt, welches durch Musik unterstrichen wird. Beim scrollen der Seite merkt man ganz klar den Animationshintergrund von Mike L. Murphy.
https://mike-murphy.webflow.io/
Amanda Lee Peers Music Website
Die Geschichte hinter der Musikerin Rochester, NY wird eindrucksvoll dargestellt. Verschiedene Etappen ihrer Karriere werden durch Scrollytelling gehighlightet.
https://www.amandaleepeers.com/
BelArosa Chalet
Das Belarosa Chalet bietet Luxuszimmer für Übernachtungen an. Die Website arbeitet mit vielen Illustrationen, welche die Qualität der Zimmer und des Services hervorheben. Allgemein fühlt sich die Seite sehr hochwertig und durchdacht an, jede Illustration wurde passend ausgewählt und liebevoll erstellt.
https://www.belarosa-chalet.ch/
MOMW - Moon on my wall
Das erste E-Commerce-Projekt in unserer Liste: Moon on my wall verkauft einen beleuchtbaren Mond, der perfekt ins Schlafzimmer für eine entspannte Atmosphäre passt. Die Startanimation verdeutlicht das Konzept perfekt.
https://www.themoononmywall.com/
Fazit
Viele Scrollytelling Websites heben sich durch ihre hohe Qualität und Einzigartigkeit von der Konkurrenz ab. Das liegt wohl daran, dass Unternehmen, Designer und Entwickler bewusst mehr in durchdachte Konzepte investieren, die die Werte und Merkmale des Unternehmens widerspiegeln, anstatt sich für Standardlösungen zu entscheiden. Scrollytelling ist ein effektives Mittel, um Nutzer zu fesseln, aber ohne ein starkes Konzept dahinter bleibt es wirkungslos. Webflow bietet eine super Grundlage, um Scrollytelling Websites erfolgreich umzusetzen.
FAQ
Was ist Scrollytelling?
Scrollytelling ist eine Form des digitalen Storytellings, bei der die Geschichte durch das Scrollen auf einer Webseite erzählt wird. Diese Methode nutzt verschiedene multimediale Elemente wie Texte, Bilder, Videos, Animationen und interaktive Grafiken, die sich dynamisch verändern oder aufdecken, während der Nutzer durch die Inhalte scrollt. Dieses Vorgehen schafft ein einzigartiges Erlebnis, das die Aufmerksamkeit des Nutzers auf sich zieht und aufrechterhält. Scrollytelling eignet sich besonders gut, um komplexe Sachverhalte anschaulich zu machen, emotionale Erzählungen zu transportieren oder datenintensive Geschichten visuell ansprechend aufzubereiten.
Welche Vorteile habe ich, wenn ich Scrollytelling einsetze?
Bei dem richtigen Einsatz von Scrollytelling kannst Du den Nutzer fesseln und den Websitebesuch zu einem Erlebnis machen. So bleibst Du und das Produkt besser in seinem Gedächnis, was im Optimalfall zu mehr Umsatz führen kann.
Kann ich Scrollytelling mit Webflow umsetzen?
Ja, in Webflow lassen sich nativ Scroll-Animationen einfügen. Auch fortgeschrittene Animationen, mit welchem man Geschichten erzählen kann, sind möglich. Für wirklich komplexe Animationen kann man mit eigenem Code arbeiten oder auf Anbieter wie GSAP zurückgreifen.
