Ein Video aus einer Website machen: So scrollt sie automatisch

Öffne die Seite, öffne die DevTools (F12, oder ⌥ ⌘ I auf dem Mac), füge das hier in die Konsole ein und drücke Enter. Es wartet drei Sekunden, damit du deinen Rekorder starten kannst, und scrollt dann entlang einer Ease-in-out-Kurve in der eingestellten Zeit von oben nach unten.

const SECONDS = 20;        // wie lange das Scrollen dauert
const WAIT = 3;            // Zeit, um den Rekorder zu starten

document.documentElement.style.scrollBehavior = 'auto';
window.scrollTo(0, 0);

const end = document.documentElement.scrollHeight - innerHeight;
const ease = (t) => (t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2);

setTimeout(() => {
  const start = performance.now();
  const step = (now) => {
    const t = Math.min(1, (now - start) / (SECONDS * 1000));
    window.scrollTo(0, end * ease(t));
    if (t < 1) requestAnimationFrame(step);
  };
  requestAnimationFrame(step);
}, WAIT * 1000);

• scrollBehavior = 'auto' ist wichtig. Viele Websites setzen scroll-behavior: smooth, was jeden der kleinen Schritte des Skripts in eine eigene Animation verwandelt und das Ruckeln direkt zurückbringt.
• requestAnimationFrame bewegt die Seite einmal pro angezeigtem Bild, das Scrollen ist also so gleichmäßig, wie das Display es zulässt.
• Scroll vor dem Start einmal von Hand nach unten und zurück, damit nachgeladene Bilder schon da sind und sich die Seitenhöhe während der Aufnahme nicht ändert.
• Websites mit einer Smooth-Scroll-Bibliothek wie Lenis oder Locomotive Scroll steuern das Scrollen selbst und können dem Skript in die Quere kommen. Wenn die Seite ruckartig springt, liegt es daran.

Ein Skript überlässt die Bildrate trotzdem deinem Rekorder und deinem Rechner. Ein Renderer nimmt dir beides ab: Website Scroll Video liest die ganze Seite einmal ein und berechnet dann, wo sie in jedem Bild eines Videos mit festen 24, 30 oder 60 fps stehen muss. Eine schwere Seite kann also keine Bilder verlieren und eine lange nicht aus dem Takt geraten. Du stellst dieselben Dinge ein wie im Skript, in Sekunden und per Kurve, und siehst dir das Ergebnis vorher an, ohne etwas auszugeben.

Miss die Seite in Bildschirmhöhen: ihre volle Höhe geteilt durch die Fensterhöhe. Eine typische Landingpage hat fünf bis acht. Dann:

Schneller als eine Bildschirmhöhe pro Sekunde verschwimmt Text, besonders bei 30 fps oder in einem GIF. Langsamer als drei, und die Zuschauer schweifen ab. Wenn ein Abschnitt wichtiger ist als der Rest, ist eine Pause dort besser, als die ganze Seite zu verlangsamen; Website Scroll Video erlaubt bis zu 6, jede zwischen 0,5 und 5 Sekunden.

• Weich (Ease-in-out). Startet aus dem Stand, gleitet, kommt zur Ruhe. Die richtige Voreinstellung: Beide Enden wirken gewollt statt abgehackt.
• Gleiten (Ease-out). Startet zügig und läuft aus, wie ein Wischen auf dem Trackpad. Gut für kurze Teaser, die mit Schwung beginnen sollen.
• Linear. Ein Tempo durchgehend. Am besten für eine Hintergrundschleife, wo jeder Tempowechsel den Blick auf sich zieht.
• Puls. Bewegt sich einen Abschnitt weiter, kommt zur Ruhe, bewegt sich wieder. Wirkt, als würde jemand durch die Website blättern, und passt zu Produkttouren.

Ein Video, das nach unten scrollt und dann nach oben springt, hat beim Wiederholen einen sichtbaren Sprung. Scroll stattdessen nach unten und zurück nach oben entlang derselben Kurve: Das letzte Bild entspricht dem ersten, und die Schleife ist nahtlos. In Website Scroll Video ist das die Wiedergabe Runter und zurück, mit optionaler Pause unten vor dem Rückweg und oben, bevor die Schleife neu beginnt.