Allgemein
13. März 2024

Die 10 besten Scrollytelling Websites in Webflow

Webflow Experte - Sönke Sproll lacht
Sönke Sproll
Webflow Experte
Scrollytelling Webflow
Inhaltsverzeichnis

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.

Cula Tech

https://www.cula.tech/

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.

MOON Project

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.

Haunted House Outlanders Scrollytelling

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.

3D Scrollytelling ARQITEL

https://www.arqitel.com/

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.

Scrollytelling Hims and Hers

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.

Spaces Urbanistic

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.

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.

Amanda Lee Peers Music Website Scrollytelling

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.

Scrollytelling BelArosa Chalet

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.

E-Commerce Moon on my wall

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.

Jetzt mit Webflow starten*

Mit Sternchen * markierte Links sind Affiliate-Links.

Bereit für ein erfolgreiches Webflow Projekt?

Erstgespräch
Pfeil nach oben Icon
Webflow Experte - Sönke Sproll

Noch kein Webflow Experte?

Erhalte exklusiven Zugang zu Fachwissen, Insider-Content und Ressourcen über Webflow in unserem Newsletter.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Alter Mann als Webflow Experte

Noch kein
Webflow Experte?

Erhalte exklusiven Zugang zu Fachwissen, Insider-Content und Ressourcen über Webflow in unserem Newsletter.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.