Scrollgesteuerte Produktseite erstellen (Scroll-Video)

Eine scrollgesteuerte Produktseite ist eine einseitige Website, auf der ein Produktvideo oder eine Animation vorwärts läuft, wenn der Besucher nach unten scrollt, und rückwärts, wenn er nach oben scrollt. Die verbreitetste Methode zerlegt das Video in Einzelbilder und zeichnet je nach Scrollposition das passende Bild in ein Canvas-Element.

Dieser Artikel erklärt, woher die Technik stammt, drei Wege, sie umzusetzen, die Regeln für Performance und Barrierefreiheit, die häufigsten Fehler und wie Yeşilçam Studios eine solche Seite aus einem Montagevideo baut.

Was ist eine scrollgesteuerte Produktseite?

Auf einer klassischen Produktseite startet ein Video mit einer Wiedergabetaste und läuft in seinem eigenen Tempo. Auf einer scrollgesteuerten Seite bestimmt der Besucher die Zeit: Die Scrollleiste ist mit der Zeitachse des Videos verknüpft. Hält der Besucher an, steht das Bild still; scrollt er zurück, spult das Produkt zurück. Dieses Gefühl von Kontrolle lädt dazu ein, die Teile, Schichten oder die Drehung des Produkts genau zu betrachten.

Die Technik verbreitete sich Ende der 2010er-Jahre über die Launch-Seiten großer Technologiemarken. Seiten, auf denen Ohrhörer beim Scrollen auseinanderfielen oder sich ein Smartphone drehte, wurden schnell zu einer wiedererkennbaren Sprache des Produktmarketings. Heute nutzen auch die Landingpages kleiner Marken denselben Ansatz.

Welche Methoden gibt es für scrollgesteuerte Animation?

Methode	Funktionsweise	Stärke	Schwäche
Bildsequenz und Canvas	Das Video wird in Einzelbilder zerlegt; je nach Scrollfortschritt wird das passende Bild in ein Canvas gezeichnet	Bildgenau und in jedem Browser einheitlich	Viele Dateien zum Herunterladen
Video-Seeking	Die Wiedergabeposition einer einzelnen Videodatei folgt dem Scrollen	Eine Datei, geringe Größe	Ruckelt beim Zurückspulen; nur flüssig, wenn mit häufigen Keyframes kodiert
CSS-Scroll-Timelines	CSS-Animationen werden direkt an die Scrollposition gekoppelt	Kein JavaScript nötig, flüssig	Animiert CSS-Eigenschaften, keine Videobilder; uneinheitliche Browserunterstützung

Um ein Produktvideo abzuspielen, ist die Bildsequenz die robusteste Option. CSS-Scroll-Timelines eignen sich für begleitende Bewegungen wie Überschriften, Text und Kartenübergänge; in Browsern ohne Unterstützung muss die Seite in einer schlichten Form weiter funktionieren.

Woraus besteht eine scrollgesteuerte Seite?

Fixierte Bühne

Der Bereich, in dem die Animation läuft, bleibt auf dem Bildschirm fixiert, während der Besucher durch einen langen Abschnitt scrollt. Die Höhe dieses Abschnitts bestimmt die „Dauer“ der Animation: Ein höherer Abschnitt bedeutet langsamere Wiedergabe.

Bildsequenz

Das Video wird in komprimierte Bilder mit einer bildschirmgerechten Auflösung zerlegt. Moderne Formate wie WebP verringern die Dateigröße deutlich. Liefert man Mobilgeräten eine kleinere Sequenz aus, sinkt die Last weiter.

Textebene

Überschrift, Merkmale, Geschichte und Kontaktbereiche werden als echter HTML-Text geschrieben. So lesen Suchmaschinen den Inhalt, Screenreader lesen ihn vor und Besucher können ihn markieren.

Ersatzansicht

Bevor die Bildsequenz geladen ist, wird das erste Bild als Posterbild angezeigt, damit der Besucher nie eine leere Fläche sieht.

Wie bauen Sie eine scrollgesteuerte Produktseite Schritt für Schritt?

1. Bereiten Sie die Ausgangsanimation vor. Wählen Sie ein Video von 5 bis 20 Sekunden mit einer klaren Geschichte, etwa einer Montage, einer Produktdrehung oder einer Öffnungsbewegung.
2. Zerlegen Sie das Video in Einzelbilder. 24 bis 30 Bilder pro Sekunde reichen in den meisten Fällen; sehr lange Videos blähen die Dateianzahl ohne Gewinn auf.
3. Komprimieren Sie die Bilder und bereiten Sie sie in zwei Größen vor (Desktop und Mobil).
4. Bauen Sie das Seitengerüst: ein fixiertes Canvas, einen langen Scrollabschnitt darum herum und die Textabschnitte.
5. Rechnen Sie den Scrollfortschritt in eine Bildnummer um und zeichnen Sie innerhalb von requestAnimationFrame; zeichnen Sie nicht direkt bei jedem Scroll-Ereignis.
6. Laden Sie die Bilder geordnet vor: zuerst das Eröffnungsbild und einige Zwischenbilder, dann den Rest. Erreicht der Besucher ein Bild, das noch nicht geladen ist, zeigen Sie das nächstgelegene geladene.
7. Respektieren Sie die Einstellung für reduzierte Bewegung, testen Sie auf Mobilgeräten und messen Sie die Ladegeschwindigkeit.

Wie viele Bilder brauchen Sie und wie schwer wird die Seite?

Eine einfache Rechnung erleichtert die Planung. Ein 10-Sekunden-Video mit 24 Bildern pro Sekunde ergibt 240 Bilder. Wiegt jedes komprimierte Bild im Schnitt 60 KB, werden insgesamt rund 14 MB heruntergeladen; unkomprimiert wiegen dieselben Bilder ein Vielfaches. Es gibt drei Wege, das Gewicht zu senken:

• Weniger Bilder: Bei einer per Scrollen abgespielten Animation wirken 12 bis 15 Bilder pro Sekunde oft flüssig, weil der Besucher das Tempo bestimmt.
• Auflösung passend zum Bildschirm: Schicken Sie niemals Bilder in Desktopgröße an ein Mobilgerät.
• Progressives Laden: Laden Sie zuerst weit auseinanderliegende Bilder, dann die dazwischen; die Animation funktioniert früh in grober Form und wird flüssiger, während der Ladevorgang weiterläuft.

Auch die Höhe des Scrollabschnitts prägt das Erlebnis. Als Faustregel ergibt ein bis zwei Bildschirmhöhen Scrollweg pro Sekunde Animation ein Tempo, bei dem Besucher der Bewegung bequem folgen können.

Worauf sollten Sie bei Performance und Barrierefreiheit achten?

Das größte Risiko einer scrollgesteuerten Seite ist ihr Gewicht. Werden Hunderte Bilder in hoher Auflösung geladen, öffnet sich die Seite langsam und verbraucht mobiles Datenvolumen. Halten Sie die Bilder in der Auflösung, die der Bildschirm tatsächlich darstellen kann, laden Sie das erste Bild schnell und holen Sie den Rest schrittweise nach.

Bei der Barrierefreiheit lautet die Grundregel, die Betriebssystemeinstellung für reduzierte Bewegung zu respektieren. Die CSS-Abfrage prefers-reduced-motion meldet diese Einstellung; ist sie aktiv, zeigen Sie statt der Animation ein Standbild oder eine kurze Bildfolge. Bei Menschen mit Bewegungsempfindlichkeit können großflächige Bewegungen Schwindel auslösen.

• Kapern Sie das Scrollen nicht: Code, der die Scrollgeschwindigkeit verändert oder die Seite gewaltsam in Abschnitte einrasten lässt, ermüdet die Nutzer.
• Legen Sie Informationen nicht ausschließlich in die Animation; jede wichtige Botschaft sollte auch als Text vorhanden sein.
• Sorgen Sie für Tastaturnavigation, sichtbaren Fokus und ausreichenden Textkontrast.
• Geben Sie dem Canvas eine aussagekräftige Beschreibung oder kennzeichnen Sie es als dekorativ.

Welche Fehler passieren am häufigsten?

• Das Video per direktem Seeking abspielen und am Ende ein Bild haben, das beim Zurückscrollen ruckelt.
• Die Bilder in voller Auflösung belassen und die Seite um Megabytes schwerer machen.
• Den Scrollabschnitt zu kurz anlegen: Die Animation rauscht vorbei, und der Besucher sieht nichts.
• Text in die Bilder einbacken: Suchmaschinen und Screenreader können ihn nicht lesen.
• Nicht auf Mobilgeräten testen: Auf einem Hochformat-Bildschirm kann das Produkt aus dem Bild rutschen.

Wann ist eine scrollgesteuerte Seite die falsche Wahl?

Nicht jedes Produkt profitiert von einer scrollgesteuerten Seite. In diesen Fällen kann eine klassische Produktseite besser funktionieren:

• Wenn Besucher schnell zu Preis und Verfügbarkeit gelangen möchten, etwa in einem Katalog mit vielen Produkten.
• Wenn das Produkt keine visuelle Geschichte hat; bei einfachen, einteiligen Produkten fügt eine Scrollanimation nur Wartezeit hinzu.
• Wenn ein großer Teil des Publikums über langsame Verbindungen kommt.

Wie messen Sie, ob eine scrollgesteuerte Seite funktioniert?

Beeindruckend auszusehen ist für sich allein noch kein Erfolg. Wenn Sie nach dem Start die folgenden Kennzahlen verfolgen, sehen Sie, ob die Seite tatsächlich funktioniert:

• Scrolltiefe: welcher Anteil der Besucher das Ende der Animation erreicht.
• Klicks auf die Handlungsaufforderung: der Anteil derer, die auf die Schaltfläche nach der Animation klicken.
• Ladezeit des ersten sichtbaren Inhalts: wie schnell das Posterbild erscheint.
• Mobil im Vergleich zu Desktop: Dieselbe Seite kann sich auf beiden Gerätegruppen unterschiedlich verhalten.

Wie erstellen Sie eine scrollgesteuerte Produktseite in Yeşilçam Studios?

Website Studio verwandelt ein in Film Studio erstelltes Montage- / Demontagevideo in eine einseitige Produktwebsite, die beim Scrollen Bild für Bild abläuft. Sobald Sie das Video mit einer Montage- / Demontageanimation erstellt haben, klicken Sie beim fertigen Video auf „Website aus diesem Video erstellen“.

1. Wählen Sie das Ausgangsvideo. Wenn Sie möchten, fügen Sie ein weiteres Montagevideo oder ein Bild als zweite Szene hinzu.
2. Schreiben Sie Markenname, Produktname, Hauptüberschrift und Texte; jedes Feld ist optional, und Sam füllt alles, was Sie leer lassen, mit Beispieltexten, die zu Ihrem Produkt passen.
3. Geben Sie optional die Adresse Ihrer Website ein; Ihre Startseite und eine Unterseite werden gelesen, um Markenname, Farben, Logo und Texte zu übernehmen.
4. Wählen Sie die Menüabschnitte (Merkmale, Geschichte, Galerie, FAQ, Kontakt), die Themenfarbe, die Sprache der Website und den Hintergrund. Wenn Sie als Hintergrund „Tuschelandschaft“ wählen, bleibt er auf Geräten mit aktivierter reduzierter Bewegung still.
5. Verwenden Sie für die Galerie nur Videobilder (kostenlos) oder lassen Sie bis zu 8 Bilder generieren.
6. Klicken Sie auf „Website mit Sam erstellen“.

Ist die Website fertig, können Sie ihre Sichtbarkeit auf „Nur Sie“ oder „Öffentlich“ stellen, den Vorschaulink teilen oder die Website als ZIP herunterladen. Texte und Thema später zu bearbeiten und neu zu verpacken ist kostenlos. Zum Basic-Listenpreis kostet der Aufbau einer Website 8.751 Token (0,05 $) und jedes generierte Bild 8.751 Token (0,05 $); das Texten wird im Angebot gesondert ausgewiesen, im Free-Tarif gilt ×1,3 und im Pro-Tarif ×0,8. Einzelheiten finden Sie im Leitfaden zu Website Studio und im Leitfaden zum Veröffentlichen, die aktuellen Preise auf der Preisseite.

Häufige Fragen

Schadet eine scrollgesteuerte Seite der SEO? Nicht, solange der Text echtes HTML ist und die Seite schnell lädt. Probleme entstehen, wenn der Inhalt nur in Bildern steckt und die Seite schwer wird.

Soll ich ein Video oder eine Bildsequenz verwenden? Für scrollgekoppelte Wiedergabe ist eine Bildsequenz einheitlicher; eine Videodatei ist kleiner, kann aber beim Zurückspulen ruckeln. Für Hintergrundvideos, die einfach ablaufen, genügt eine Videodatei.

Was ist prefers-reduced-motion? Eine CSS-Media-Query, die einer Webseite mitteilt, dass der Nutzer sein Betriebssystem angewiesen hat, Bewegung zu reduzieren. Ist sie aktiv, sollen große Animationen anhalten oder vereinfacht werden.

Funktionieren scrollgesteuerte Seiten auf Mobilgeräten? Ja, aber die Bilder sollten für Mobilbildschirme bemessen sein, und die Sichtbarkeit des Produkts im Hochformat sollte getestet werden.

Kann Website Studio eine Website ohne Video von Grund auf erstellen? Stand Oktober 2026 entstehen Websites aus einem Montage- / Demontagevideo. Das Erstellen einer Website allein aus einer Beschreibung ist in der App als „demnächst“ angekündigt.