Analyse · Webdesign & Performance
Kurz gesagt: KI macht es erstaunlich einfach, eine Website teuer aussehen zu lassen. Ein generiertes Video wird in Einzelbilder zerlegt und beim Scrollen abgespielt. Das kann im ersten Moment großartig wirken. Ob die Seite schnell lädt, sich auf dem Handy gut anfühlt und Menschen zur richtigen Handlung führt, ist damit noch nicht beantwortet. Genau dort beginnt die Arbeit, für die es keinen Ein-Prompt-Trick gibt.
Der Trend
Der Effekt ist nicht neu. Neu ist, wie schnell KI das Ausgangsmaterial erzeugt und wie offensiv der fertige Look als hoher Entwicklungsaufwand verkauft wird.
Man sieht diese Seiten inzwischen regelmäßig: Beim Scrollen fährt die Kamera durch eine futuristische Landschaft, ein Produkt zerlegt sich in seine Einzelteile oder ein Gebäude wächst vor den Augen des Besuchers zusammen. In kurzen Bildschirmaufnahmen wirkt das beeindruckend. Das soll es auch.
Der zugrunde liegende Ablauf ist oft überraschend geradlinig. Ein KI-Modell erzeugt Start- und Endbilder. Ein Videomodell berechnet die Bewegung dazwischen. Danach extrahiert ein Werkzeug wie FFmpeg die Einzelbilder und ein Skript ordnet jedem Scrollstand einen Frame zu.
Ein aktueller Anbieter nennt das selbst den Look, für den Agenturen „five figures“ berechnen, und verspricht ihn mit einem Skill und einem Prompt. Für ein Beispiel nennt der Autor rund 32 Minuten Generierungszeit. Diese Zahl ist kein neutraler Branchenwert. Sie zeigt aber, wie das Produkt verkauft wird: Der sichtbare Effekt erscheint teuer, obwohl seine technische Grundform inzwischen automatisiert werden kann. Zum beschriebenen KI-Workflow bei Chase AI.
So funktioniert es
Sie sehen ähnlich aus, belasten den Browser aber auf unterschiedliche Weise.
Position, Größe oder Deckkraft normaler Seitenelemente hängen vom Scrollfortschritt ab. Moderne CSS Scroll Timelines können solche Effekte flüssig ausführen, ohne bei jedem Pixel ein schweres JavaScript-Ereignis abzuarbeiten.
Technische Erklärung von ChromeDie Scrollposition wird in eine Zeitposition des Videos umgerechnet. Der Browser sucht ständig vor und zurück. Wie genau das gelingt, hängt unter anderem von Codec, Auflösung und Keyframes ab.
Video-Seeking und Keyframes bei MuxDas Video wird zum digitalen Daumenkino. Je nach Länge liegen viele Dutzend oder Hunderte Bilder bereit. Ist alles geladen, lässt sich ein Frame direkt anzeigen. Vorher müssen die Dateien übertragen, dekodiert und im richtigen Moment verfügbar sein.
Praxisbericht zur BildsequenzDas ist ein wichtiger Unterschied. Eine dezente Animation, die das normale Scrollen begleitet, ist nicht dasselbe wie eine seitenfüllende Videoreise. Und beides ist noch einmal etwas anderes als Scrolljacking, bei dem die Seite Geschwindigkeit oder Verhalten des Scrollens verändert. Pauschale Kritik an „Animation“ wäre deshalb genauso falsch wie die Behauptung, jede Animation sei harmlos.
Konkrete Beispiele
Kein Pranger, sondern vier unterschiedliche Blickwinkel: Verkaufsversprechen, Produkt, technische Grenze und sinnvoller Einsatz.
Der aktuelle Pitch
Ein aktueller Anbieter beschreibt eine scrollbare KI-Website als Effekt, für den Agenturen fünfstellige Beträge berechnen. Für ein eigenes Beispiel nennt er ungefähr 32 Minuten Generierungszeit. Das ist eine Selbstauskunft, keine unabhängige Marktstudie. Als Beleg für das Verkaufsversprechen ist sie trotzdem aufschlussreich.
Quelle öffnen: Chase AIDas Produkt
Fenestra bietet einen Scroll Video Maker an. Nutzer laden kurze Videos hoch, ordnen sie an und erhalten eine scrollbare Seite. Das zeigt, wie weit die technische Grundidee bereits standardisiert ist. Über die Qualität einer fertigen Unternehmenswebsite sagt das noch nichts.
Quelle öffnen: FenestraDie technische Grenze
Bei der von Google dokumentierten Hobbit-Produktion verursachte die Bildsequenz auf Mobilgeräten zu viel Daten-, Speicher- und Dekodieraufwand. Das Team ersetzte den Effekt dort durch ein statisches Bild.
Quelle öffnen: web.devDer sinnvolle Einsatz
Die Nielsen Norman Group bewertet nicht jede scrollgebundene Erzählung negativ. Ein BBC-Beispiel funktionierte besser, weil die Bewegung zusätzliche Informationen schrittweise sichtbar machte. Der Effekt unterstützte den Inhalt, statt ihn zu ersetzen.
Quelle öffnen: Nielsen Norman GroupMobile Realität
Weniger Fläche ist nur der sichtbare Teil des Problems. Hinzu kommen andere Proportionen, schwankende Verbindungen und eine größere Spannweite bei der Hardware.
Ein für 16:9 komponiertes Video passt nicht ohne Weiteres in ein hochformatiges Display. Mit object-fit: cover füllt es zwar die Fläche, verliert aber Bildinhalt an den Seiten. Mit contain bleibt das Bild vollständig und bekommt dafür freie Flächen. Die dritte Möglichkeit ist eine eigene Hochformat-Produktion. Sie sieht besser aus, verdoppelt aber einen Teil der Arbeit und der Tests. MDN dokumentiert diese Größen- und Beschnittregeln.
Dazu kommt die Technik. Ein Smartphone muss viele Bilder laden und dekodieren oder fortlaufend im Video suchen. Fehlt ein Frame, reagiert das Bild später als der Finger. Genau dann entsteht das seltsame Gefühl, das bei einer Aufnahme kaum auffällt, auf dem eigenen Gerät aber sofort stört.
It's too much data to decode and store in memory if we want decent quality on mobile.
Entwickler der Hobbit-Webproduktion, dokumentiert auf web.dev
Diese Werte sind Seitenaufrufe, keine Kunden oder Conversions. Sie widerlegen eine pauschale 60-Prozent-Regel, zeigen aber auch: Mobile ist zu groß, um nur eine abgespeckte Zweitfassung zu bekommen. Für die eigene Entscheidung zählen am Ende die echten Zugriffsdaten der jeweiligen Website.
Nutzerkontrolle
Menschen haben über Jahre gelernt, wie Scrollen funktioniert. Wer diese Erwartung verändert, muss einen sehr guten Grund dafür haben.
Die Nielsen Norman Group beobachtete bei Scrolljacking Probleme mit Orientierung, Auffindbarkeit, Aufmerksamkeit und dem erfolgreichen Abschluss von Aufgaben. Manche Testpersonen aktualisierten die Seite oder verließen sie, weil die lange Sequenz wie ein Fehler wirkte.
The majority of our study participants were at least mildly disoriented by scrolljacking.
Sara Paul, Nielsen Norman Group, „Scrolljacking 101“
Das heißt nicht, dass eine Website niemals erzählen darf. Das BBC-Beispiel aus derselben Untersuchung funktionierte besser, weil jeder Scrollschritt verständliche Zusatzinformationen freilegte. Der Nutzer blieb am Steuer und bekam für die Bewegung einen inhaltlichen Gegenwert.
Bei einer Firmenwebsite ist die Ausgangslage oft nüchterner. Ein Besucher sucht eine Leistung, eine Referenz, einen Preisrahmen oder die Telefonnummer. Muss er zuerst durch eine lange Kamerafahrt, konkurriert der Effekt mit seiner Aufgabe.
Barrierefreiheit
Für manche Menschen lösen große, scrollgebundene Bewegungen Schwindel, Übelkeit oder Kopfschmerzen aus.
Die W3C nennt scrollbedingte Zusatzbewegung und Parallax ausdrücklich als mögliche Auslöser vestibulärer Beschwerden. Das Erfolgskriterium 2.3.3 „Animation from Interactions“ verlangt auf WCAG-Level AAA, dass nicht notwendige interaktionsgesteuerte Bewegung abschaltbar ist. Daraus folgt nicht, dass jede Scroll-Animation automatisch gegen WCAG AA verstößt. Es ist trotzdem eine klare Gestaltungsregel: Respektieren Sie prefers-reduced-motion und bieten Sie einen ruhigen Ersatz. Erläuterung der W3C zu Bewegung aus Interaktionen.
Der Ersatz darf nicht aus einer leeren Fläche bestehen. Überschrift, Inhalt, Navigation und Kontaktweg müssen auch ohne die Animation verständlich bleiben. Sonst ist der Effekt kein Zusatz mehr, sondern eine Zugangsschranke.
SEO & Conversion
Suchmaschinen bewerten nicht das Stilmittel, sondern die Seite, die am Ende im Browser ankommt.
Google nutzt die mobile Version einer Website für Indexierung und Ranking. Eine eindrucksvolle Desktop-Fassung hilft wenig, wenn Text, Links oder Inhalte mobil fehlen. Google empfiehlt responsives Design.
Google: Mobile-first IndexingCore Web Vitals gehören zu Googles Systemen für die Seitenerfahrung. Gute Werte garantieren kein Ranking und ein einzelner Effekt löst keine automatische Strafe aus. Eine schnelle, mobile und verständliche Seite bleibt trotzdem die bessere Grundlage.
Google: Page ExperienceAuch hier lohnt Genauigkeit. Scrollen selbst fließt nicht in den Core Web Vital INP ein. Ruckeliges Scrollen macht also nicht automatisch den INP-Wert schlechter. Videos können selbst das größte sichtbare Element und damit ein LCP-Kandidat sein. Ein beschäftigter Main Thread kann spätere Klicks ausbremsen. Die Qualität der Scrollbewegung muss zusätzlich auf echten Geräten gemessen werden. web.dev erklärt, welche Interaktionen INP tatsächlich erfasst. Wie Videos den LCP beeinflussen können, beschreibt der web.dev-Leitfaden zur Video-Performance.
Für den geschäftlichen Effekt gibt es ebenfalls keine ehrliche Pauschale. Eine Scroll-Website hat nicht automatisch „keine Conversions“. Belegt ist aber, dass Performance Ergebnisse verändern kann. Vodafone verglich zwei visuell und funktional gleiche Varianten. Die schnellere Version verbesserte den Largest Contentful Paint um 31 Prozent und erzielte 8 Prozent mehr Verkäufe. Zur Vodafone-Fallstudie auf web.dev.
Die faire Entscheidung
Die Frage ist nicht, ob eine Animation modern aussieht. Sie muss für die Aufgabe der Seite arbeiten.
| Einsatz | Einschätzung | Warum |
|---|---|---|
| Kurze Markenkampagne | Kann passen | Aufmerksamkeit ist Teil des Ziels, solange Inhalt und CTA zugänglich bleiben. |
| Komplexes Produkt erklären | Gezielt einsetzen | Die Bewegung muss etwas zeigen, das ein statisches Bild schlechter erklärt. |
| Portfolio und Kreativprojekt | Kann passen | Der visuelle Eindruck ist selbst Teil der angebotenen Leistung. |
| Lokaler Dienstleister | Meist reduzieren | Leistung, Vertrauen und Kontakt sind wichtiger als eine lange Inszenierung. |
| Kontakt, Buchung oder Checkout | Nicht in den Weg stellen | Hier zählt ein kurzer, störungsfreier Weg zum Abschluss. |
Prüfliste
Wenn eine Agentur oder ein Entwickler eine scrollgesteuerte Website vorschlägt, sollten diese Fragen konkret beantwortet werden.
prefers-reduced-motion respektiert?Fehlen darauf klare Antworten, kaufen Sie wahrscheinlich zuerst einen Eindruck. Das kann für eine Kampagne reichen. Für eine Website, die über Jahre Kunden gewinnen soll, ist es zu wenig.
Ich mag gute Animationen. Sie können ein Produkt verständlicher machen und einer Marke Charakter geben. Aber eine Firmenwebsite muss auch an einem älteren Smartphone, in einer schlechten Verbindung und bei einem ungeduldigen Besucher funktionieren. Die drei Fälle gehören nicht an den Rand der Planung. Sie sind der Alltag.
FAQ
Die kurzen Antworten auf die wichtigsten technischen und geschäftlichen Fragen.
Bei einer Scroll-Video-Website steuert die Scrollposition eine Animation. Häufig wird dafür ein Video in viele Einzelbilder zerlegt. Die Website zeigt abhängig von der Position jeweils das passende Bild. Eine andere Variante springt im Video selbst an die gewünschte Zeit. Beides kann wie eine interaktive Kamerafahrt wirken.
Nein. Eine kurze, gut umgesetzte Animation kann ein Produkt erklären oder eine Geschichte verständlicher machen. Problematisch wird es, wenn die Website das gewohnte Scrollen verändert, wichtige Inhalte im Effekt versteckt oder auf Mobilgeräten keinen brauchbaren Ersatz anbietet.
Smartphones arbeiten mit unterschiedlichen Prozessoren, Speichermengen, Displays und Verbindungen. Eine Bildsequenz muss viele Dateien laden und dekodieren. Eine Videolösung muss beim Scrollen präzise suchen. Wenn Daten, Frames oder Rechenzeit fehlen, reagiert das Bild später als der Finger.
Google bestraft Scroll-Videos nicht als Technik. Risiken entstehen durch eine langsame mobile Seite, große Medien, schlecht erreichbare Inhalte oder Text, der nur als Teil eines Bildes erscheint. Inhalt, Navigation und Kontaktweg sollten deshalb als normales HTML funktionieren.
Sie kann sich für eine kurze Markengeschichte, einen erklärungsbedürftigen Produktmoment oder eine zeitlich begrenzte Kampagne lohnen. Voraussetzung sind ein klarer Zweck, normales Scrollverhalten, eine mobile Variante, ein ruhiger Ersatz bei reduzierter Bewegung und messbare Performance-Ziele.