Zum Inhalt springen

So hältst du Scroll-Animationen und Parallax in einem Website-Video fest

Einblendungen, Reveals, Parallax und fixierte Abschnitte passieren nur, während eine Seite wirklich scrollt. So bekommst du sie ins Video, und warum die meisten Tools für ganze Seiten sie verpassen.

Aviral LakhanpaulAktualisiert am 3 Min. Lesezeit

Die kurze Antwort

Scroll-Animationen laufen nur, während die Seite wirklich scrollt. Ein Tool, das über einen einzigen Screenshot der ganzen Seite schwenkt, kann sie also nicht zeigen. Nimm entweder die Seite auf, während ein Skript sie scrollt, oder nutze einen Renderer, der die Seite live an jeder Scrollposition erfasst, wie die Live-Aufnahme von Website Scroll Video. Für ein schnelleres Ergebnis ohne die Bewegung lass Einblendungen vor der Aufnahme bis zu ihrem Endzustand laufen.

Warum die Animationen fehlen

Die meisten URL-zu-Video-Tools arbeiten in zwei Schritten: einen sehr langen Screenshot der Seite machen und dann einen Ausschnitt darüber bewegen. Das ist schnell und perfekt flüssig, aber der Screenshot ist ein einziger Moment. Alles, was von der Scrollposition gesteuert wird, etwa eine Überschrift, die beim Hereinkommen einblendet, ein Parallax-Bild, ein Abschnitt, der beim Scrollen fixiert bleibt und sich verändert, oder ein Zähler, der hochzählt, bleibt in dem Zustand stehen, den es in diesem Moment hatte.

Je nachdem, wie die Seite gebaut ist, ist das einer von drei Zuständen:

  • Fertig, was gut aussieht, aber statisch.
  • Nicht gestartet, was leere Lücken lässt, wo Abschnitte sein sollten, weil Elemente, die auf ihre Einblendung warten, noch unsichtbar sind.
  • Halb fertig, mitten im Einblenden oder Hereingleiten erwischt, was kaputt aussieht.

Deine Möglichkeiten

Wege, Scroll-Animationen aufzunehmen
AnsatzAnimationenScrollenTempo
Über ein Standbild schwenken, Einblendungen vorher fertigIn ihrem Endzustand gezeigtBerechnet, perfekt gleichmäßigSchnell
Live-Aufnahme an jeder ScrollpositionSpielen so, wie ein Besucher sie siehtBerechnet, mit fester BildrateDeutlich langsamer
Bildschirmaufnahme mit Scroll-SkriptSpielen in EchtzeitSo gleichmäßig, wie dein Rechner es zulässtEchtzeit, plus Schnitt

Der schnelle Weg: vorher ausspielen

Wenn die Animationen nur Einblendungen sind, also Einblenden und Hereingleiten, mit denen Inhalte an ihren Platz kommen, sieht die Seite im Endzustand meist richtig aus. In Website Scroll Video ist das der Schalter Animationen ausspielen, zusammen mit der schnellen Engine Statischer Schwenk. Einblendungen laufen bis zum Ende, bevor die Seite eingelesen wird, nichts wird unsichtbar oder halb fertig erwischt, und das Scrollen ist so flüssig und so schnell gerendert wie jedes andere.

Der originalgetreue Weg: live aufnehmen

Wenn es um die Bewegung geht, wie bei den meisten Framer- und Webflow-Templates, Agentur-Websites und Produkt-Launches, stell die Engine auf Live-Aufnahme. Statt über ein einziges Bild zu schwenken, scrollt sie einen echten Browser an jede Position und macht dort einen Screenshot. Reveals, Parallax, fixierte Abschnitte und scrollgekoppelte Transformationen spielen im Video also genau so ab wie auf der Seite.

  • Das Scrollen wird trotzdem berechnet, ist also so gleichmäßig wie bei Statischer Schwenk und hält feste 24, 30 oder 60 fps.
  • Pausen, Hover, Rahmen und Hintergründe funktionieren damit genauso wie mit Statischer Schwenk.
  • Sie hält einen echten Browser über die ganze Länge des Videos, deshalb rendert sie deutlich langsamer und kostet 13 Credits mehr pro Export. Sie steht jedem Konto ab dem ersten Export zur Verfügung, ohne Tarif, der freigeschaltet werden muss.

Selbst aufnehmen

Für eine Seite, die ein Renderer nicht erreicht, nimm den Bildschirm auf, während ein Skript scrollt. Die Anleitung zum automatischen Scrollen hat das Skript. Zwei Dinge, auf die du achten solltest:

  • Websites mit einer Smooth-Scroll-Bibliothek wie Lenis oder Locomotive Scroll steuern ihre Animationen oft über die Bibliothek statt über das Scrollen des Browsers. Ein Skript, das window.scrollTo aufruft, kann sie überspringen. Scroll so, wie die Website es erwartet, oder nimm mit ausgeschalteter Bibliothek auf und nimm den Unterschied in Kauf.
  • Animationsreiche Seiten verlieren beim Aufnehmen am ehesten Bilder. Schließ alles andere, nimm mit 60 fps auf, und lies ruckelnde Scroll-Aufnahmen beheben, wenn die Aufnahme trotzdem stockt.

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
    Warum sind Abschnitte in meinem Website-Scroll-Video leer?

    Es sind Elemente, die auf eine Einblendung beim Scrollen warten, die nie ausgelöst wurde, weil das Tool ein Standbild der Seite erfasst hat. Lass die Animationen vor der Aufnahme ausspielen oder nutze eine Live-Aufnahme, die die echte Seite scrollt.

    Kann ich Parallax-Effekte aufnehmen?

    Ja, mit einer Methode, die die Seite wirklich scrollt: einer Bildschirmaufnahme mit Scroll-Skript oder einem Renderer, der an jeder Scrollposition erfasst, etwa der Live-Aufnahme in Website Scroll Video.

    Kostet die Live-Aufnahme extra?

    Sie kostet 13 Credits mehr pro Export, weil sie einen echten Browser über die ganze Länge des Videos laufen lässt. Alles andere am Preis bleibt gleich.

    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.