Zum Inhalt springen

So nimmst du ein Website-Scroll-Video auf

So nimmst du eine scrollende Website ohne Ruckeln, Pop-ups oder abgeschnittene Seite auf: Seite vorbereiten, Rekorder einrichten, Scrollen automatisieren, dann schneiden.

Aviral LakhanpaulAktualisiert am 4 Min. Lesezeit

Die kurze Antwort

Räum zuerst die Seite auf (Cookie-Banner schließen, Chat-Widgets wegklicken), stell das Browserfenster genau auf den Ausschnitt ein, den du willst, nimm mit 60 fps und einem Rekorder mit konstanter Bildrate auf und lass ein Skript scrollen statt deiner Hand. Oder spar dir den Rekorder und gib die URL einem Renderer, der das Scrollen für dich berechnet.

Zwei Wege zum Material

Du kannst die Seite aufnehmen: Ein Bildschirmrekorder hält fest, was dein Monitor zeigt, während die Seite scrollt. Oder du lässt sie rendern: Ein Tool öffnet die Seite in seinem eigenen Browser und baut das Video Bild für Bild. Diese Anleitung behandelt den ersten Weg, weil er manchmal der richtige ist. Wenn die Seite öffentlich ist und du nur das Scrollen brauchst, ist die Schritt-für-Schritt-Anleitung, ein Video aus einem Link zu erstellen, schneller.

Selbst aufnehmen lohnt sich, wenn:

  • Die Seite hinter einem Login liegt, auf localhost läuft oder in einem Netzwerk, das nur du erreichst.
  • Du echte Interaktion zeigen willst: in ein Formular tippen, Menüs öffnen, Dinge ziehen.
  • Deine Stimme oder deine Kamera mit ins Bild soll, wie in einem Tutorial.

Die Seite vorbereiten

Die meisten misslungenen Aufnahmen gehen verloren, bevor der Rekorder läuft. Erledige das einmal, und jede Aufnahme wird besser.

  1. Öffne die Seite in einem frischen Profil oder einem privaten Fenster, damit deine Erweiterungen, die Lesezeichenleiste und dein Anmeldestatus nicht ins Bild kommen.
  2. Akzeptiere oder schließe das Cookie-Banner, schließe das Newsletter-Modal und minimiere den Chat-Launcher. Sie tauchen nach einem Neuladen gern wieder auf, also mach das zuletzt.
  3. Scroll vor der Aufnahme einmal ganz nach unten und zurück. So laden nachgeladene Bilder und Einblendungen lösen aus, und die Aufnahme erwischt keine halb geladenen Abschnitte.
  4. Blende die Scrollleiste aus, wenn sie stört. Füge in den DevTools html { scrollbar-width: none; } zu den Styles der Seite hinzu.
  5. Schalte Benachrichtigungen aus. Ein Banner, das oben rechts hereinfährt, ruiniert eine sonst perfekte Aufnahme.

Das Fenster auf den Ausschnitt einstellen

Entscheide zuerst das Ausgabeformat und bring dann das Browserfenster in diese Form. Wer einen ganzen 16:10-Bildschirm aufnimmt und hinterher auf 9:16 beschneidet, wirft die meisten Pixel weg und bekommt ein unscharfes Ergebnis.

  • Für 16:9 ist ein Fenster mit 1280 × 720 oder 1920 × 1080 (Inhaltsbereich) am saubersten.
  • Für ein Video im Handyformat öffne die DevTools, schalte die Gerätesymbolleiste ein und wähle ein Handy. Die Seite liefert dann ihr mobiles Layout aus, und du nimmst nur diesen Viewport auf.
  • Stell den Seitenzoom auf 100 %. Gezoomte Seiten rendern Text in krummen Größen und wirken nach dem Skalieren weich.

Ein Retina- oder High-DPI-Display nimmt mit doppelter Pixelgröße des Fensters auf, und das ist gut so: Du kannst auf 1080p herunterskalieren und der Text bleibt scharf.

Den Rekorder einrichten

Einstellungen für die Bildschirmaufnahme einer scrollenden Website
EinstellungNimmWarum
Bildrate60 fpsScrollen ist ständige Bewegung. Bei 30 fps springt jedes Bild doppelt so weit, und das wirkt wie Ruckeln
BildratenmodusKonstant (CFR)Dateien mit variabler Bildrate ruckeln in Schnittprogrammen und manchen Playern
AufnahmebereichDas Browserfenster oder ein Bereich, nicht der ganze BildschirmKein Beschneiden hinterher, also keine verlorene Auflösung
MauszeigerAusgeblendet, außer du zeigst auf etwasEin stillstehender Zeiger mitten im Scrollen wirkt wie ein Versehen
QualitätHohe Bitrate, oder verlustfrei, wenn du schneidestScrollender Text ist für einen Encoder das Schwierigste: Jedes Pixel bewegt sich in jedem Bild

Auf dem Mac schreiben der eingebaute Rekorder (Umschalt ⌘ 5) und QuickTime Dateien mit variabler Bildrate. OBS Studio, kostenlos für macOS, Windows und Linux, nimmt mit einer konstanten Bildrate deiner Wahl auf. Unter Windows nehmen das Snipping Tool und die Xbox Game Bar beide auf, aber OBS gibt dir die meiste Kontrolle.

Lass etwas anderes als deine Hand scrollen

An diesem Schritt entscheidet sich, ob das Video professionell aussieht. Ein Mausrad bewegt sich in Rasterstufen, ein Trackpad schnellt und läuft aus, und keins von beiden hält zwanzig Sekunden lang ein gleichmäßiges Tempo. Warum Scroll-Aufnahmen ruckeln geht den Ursachen nach.

Die verlässliche Lösung: Lass den Browser selbst scrollen. Ein kurzes Skript in der DevTools-Konsole scrollt die ganze Seite entlang einer Easing-Kurve über eine festgelegte Zeit. Das vollständige Snippet und wie du das Tempo wählst, steht in So scrollt eine Website für ein Video automatisch.

  1. Skript einfügen, noch nicht ausführen

    Stell die Dauer darin auf die Länge, die das Scrollen dauern soll.

  2. Rekorder starten

    Gönn dir oben ein, zwei Sekunden Ruhe. Du kannst sie später wegschneiden, und ein stehendes erstes Bild ergibt ein besseres Vorschaubild.

  3. Skript ausführen und Finger weg

    Fass Maus und Trackpad nicht an, bis die Seite stillsteht. Jede Eingabe kämpft gegen das Skript.

  4. Stoppen, dann die Enden schneiden

    Schneide auf das erste und letzte Bild mit Bewegung, plus die Haltezeit, die du davor und danach willst.

Wann Aufnehmen der Umweg ist

Richtig gemacht ist das oben eine Viertelstunde pro Aufnahme, und ein anderes Format heißt eine neue Aufnahme. Wenn die Seite öffentlich ist, erledigt ein Renderer alles aus der URL: Er öffnet die Seite in Desktop-, Tablet- oder Handy-Breite, entfernt die Pop-ups, liest die Seite in doppelter Pixeldichte ein und berechnet die Bewegung mit festen 24, 30 oder 60 fps. Du änderst eine Einstellung und exportierst neu, statt neu aufzunehmen.

Probier es mit deiner eigenen Website

Link einfügen und die Vorschau kostenlos ansehen. 51 Gratis-Credits bei der Anmeldung, ohne Kreditkarte, und kein Wasserzeichen auf deinen Exporten.

Zuletzt gesucht

    Fragen und Antworten

    Kurz beantwortet, was als Nächstes gefragt wird.

    Kontakt
    Welcher kostenlose Bildschirmrekorder eignet sich am besten für scrollende Websites?

    OBS Studio. Es ist kostenlos für macOS, Windows und Linux, nimmt mit konstanter Bildrate auf und kann ein einzelnes Fenster erfassen. Die in macOS und Windows eingebauten Rekorder funktionieren auch, geben dir aber weniger Kontrolle über Bildrate und Qualität.

    Warum sieht meine Aufnahme auf dem Bildschirm flüssig aus, ruckelt aber beim Abspielen?

    Meist liegt es an einer Datei mit variabler Bildrate, an einer Aufnahme mit 30 fps oder an einer Bitrate, die für sich bewegenden Text zu niedrig ist. Nimm mit konstanten 60 fps und hoher Bitrate auf und lass ein Skript scrollen statt eines Mausrads.

    Wie nehme ich eine ganze Webseite auf, die länger ist als mein Bildschirm?

    Scroll sie während der Aufnahme, am besten per Skript, damit das Tempo gleichmäßig bleibt. Ein Bildschirmrekorder erfasst immer nur, was gerade im Fenster ist, also bestimmt das Scrolltempo die Länge des Videos.

    Weiterlesen

    Logo von Website Scroll Video, ein Play-Button über einer Webseite in einem Browserfenster.

    Weniger Zeit aufnehmen. Mehr Zeit bauen.

    Automatisiere Website-Aufnahmen mit anpassbarer Bewegung, cleveren Reglern und Exportoptionen für moderne Creator.

    Jetzt ausprobieren

    Hilf mit, dein nächstes Video besser zu machen

    Analyse-Cookies zeigen uns, welche Seiten helfen und wo Leute hängen bleiben, damit wir wissen, was wir als Nächstes verbessern und bauen. Was wir erfassen

    Die Seiten, die du aufnimmst, und deine Videos sind nie Teil davon, und nichts davon wird für Werbung genutzt.