Ratgeber
Scroll-Animationen und Video-Hero: Wann wirken sie Premium und wann stören sie?
Scroll-Animationen und ein Video-Hero wirken hochwertig, wenn sie etwas zeigen, das dein Angebot erklärt oder erlebbar macht, ruhig und flüssig laufen und den Inhalt nicht verdecken. Sie stören, wenn sie die Seite bremsen, das Scrollen kapern, auf dem Handy ruckeln oder nur Effekt um des Effekts willen sind.
Bewegung auf einer Website ist ein starkes Werkzeug – und ein schneller Weg, eine Seite unruhig und langsam zu machen. Hier steht, worin sich gelungene und störende Animationen unterscheiden und worauf du bei Planung oder Angebot achten solltest.
Von Fabian Baloi · Zuletzt aktualisiert:
01
Was sind Scroll-Animationen und was ist ein Video-Hero?
Scroll-Animationen sind Bewegungen, die an das Scrollen gekoppelt sind: Texte erscheinen, Bilder schieben sich ins Bild, eine Kamerafahrt läuft vorwärts, während du nach unten scrollst. Der Besucher steuert die Bewegung selbst.
Ein Video-Hero ist ein Video im obersten Bereich einer Website, oft als ruhige Schleife ohne Ton. Es setzt die Stimmung, bevor der erste Satz gelesen wird. Beides lässt sich kombinieren, etwa als Video, das sich beim Scrollen öffnet oder abspielt.
02
Wann wirken Animationen Premium, wann stören sie?
| Wirkt hochwertig | Stört | |
|---|---|---|
| Inhalt | Zeigt Produkt, Raum oder Ablauf, den man sonst schwer versteht | Effekt ohne Bezug zum Angebot |
| Tempo | Ruhig, gleichmäßig, mit weichem Auslaufen | Hektisch, ruckelnd, zu viele Dinge gleichzeitig |
| Menge | Ein, zwei starke Momente auf der Seite | Jedes Element fliegt, dreht oder blinkt |
| Kontrolle | Der Besucher scrollt und behält die Kontrolle | Die Seite übernimmt das Scrollen und lässt sich nicht normal bedienen |
| Lesbarkeit | Text steht ruhig und gut lesbar | Text bewegt sich, solange man liest |
| Ladezeit | Erst ein leichtes Standbild, Bewegung im Hintergrund nachgeladen | Weißer Bildschirm, bis ein großes Video geladen ist |
| Handy | Eigene, leichtere Fassung im Hochformat | Desktop-Fassung, verkleinert und ruckelnd |
03
Für welche Websites eignet sich ein Video-Hero?
Orte und Räume
Hotels, Restaurants, Immobilien, Ferienwohnungen – überall, wo Atmosphäre verkauft. Mehr dazu unter Immobilien-Content.
Produkte mit Wow-Moment
Fahrzeuge, Uhren, Möbel, Technik: Bewegung zeigt Form, Licht und Material besser als ein Foto.
Marken und Kampagnen
Wenn der erste Eindruck entscheidet, ob jemand bleibt.
Weniger geeignet
Notdienste, Behörden, reine Informationsseiten. Wer schnell eine Nummer sucht, will kein Video abwarten.
04
Wie viel Bewegung passt zu welcher Marke?
Bewegung hat einen Charakter. Langsame, weiche Übergänge und viel Ruhe wirken edel und passen zu Hotels, Architektur, Uhren oder Immobilien. Schnellere Schnitte und deutliche Bewegungen passen eher zu Sport, Mode oder jungen Marken. Wichtig ist, dass die Bewegung zur Marke passt und überall auf der Seite gleich funktioniert – nicht hier weich und dort hektisch.
Ein guter Test: Schalte die Animationen gedanklich ab. Funktioniert die Seite dann noch, und versteht man das Angebot? Wenn ja, ist die Bewegung ein Zusatz, der Wirkung bringt. Wenn nein, trägt die Animation zu viel, und die Seite steht auf wackligen Beinen.
05
Was ist bei Ladezeit und Handy wichtig?
Videos und Animationen sind die häufigste Ursache für langsame, aufwendige Websites. Die Lösung ist eine klare Reihenfolge: Zuerst lädt ein leichtes Standbild, das sofort etwas zeigt, danach im Hintergrund das Video. Videos werden stark komprimiert und für das Handy in einer eigenen, kleineren Fassung angeboten. Warum das so wichtig ist, erklärt Warum langsame Websites Kunden kosten.
Auf dem Handy gelten andere Regeln: Hochformat, weniger Rechenleistung, mobiles Netz. Eine gute Seite hat deshalb eine eigene Handy-Fassung der Bewegung statt einer verkleinerten Desktop-Version.
06
Was bedeutet Barrierefreiheit bei Animationen?
Manche Menschen reagieren auf starke Bewegung mit Schwindel oder Übelkeit und stellen in ihrem Betriebssystem „Bewegung reduzieren“ ein. Eine gut gebaute Website erkennt diese Einstellung und zeigt dann eine ruhigere Fassung ohne große Bewegungen. Die Richtlinien für barrierefreie Webinhalte (WCAG) behandeln das unter Animation from Interactions.
Außerdem gilt: Inhalte dürfen nicht nur in der Animation stehen. Alle wichtigen Informationen müssen auch als normaler Text lesbar sein – für Menschen mit Screenreader, für Suchmaschinen und für KI-Suchen.
07
Checkliste: Worauf solltest du im Angebot achten?
Wie viele bewegte Momente?
Wo genau auf der Seite und warum dort?
Was sieht man beim Laden?
Gibt es ein Standbild, oder bleibt die Seite leer, bis alles geladen ist?
Gibt es eine Handy-Fassung?
Lass dir eine Referenz auf dem Handy zeigen, im mobilen Netz.
Wird „Bewegung reduzieren“ beachtet?
Frag, was passiert, wenn diese Einstellung aktiv ist.
Bleibt der Text lesbar und auffindbar?
Steht alles Wichtige auch als echter Text auf der Seite?
08
So hilft UpToVision
Wir bauen Websites mit Kamerafahrten, Scroll-Animationen und Video-Hero – mit Standbild zuerst, eigener Handy-Fassung und einer ruhigen Variante für „Bewegung reduzieren“. Beispiele und Ablauf stehen bei Websites mit 3D-Animationen, die Kostenfaktoren im Artikel Was kostet eine Website mit 3D-Animationen?. Ob sich der Aufwand für dich lohnt, hilft Lohnt sich eine 3D-Website? einzuschätzen.
Schreib uns an kontakt@up2vision.com oder über die Kontaktseite.
09
Häufige Fragen
Machen Scroll-Animationen eine Website langsam?
Nicht zwangsläufig. Gut gebaute Animationen laden ein leichtes Standbild zuerst und den Rest im Hintergrund. Schlecht gebaute können eine Seite stark ausbremsen – deshalb immer auf dem Handy testen.
Schaden Animationen dem Google-Ranking?
Nicht an sich. Probleme entstehen, wenn sie die Ladezeit verschlechtern, Inhalte verrutschen lassen oder wichtiger Text nur in der Animation steht. Wenn Technik und Text stimmen, ist Bewegung kein Nachteil.
Sollte ein Video-Hero Ton haben?
Nein, zumindest nicht automatisch. Browser spielen Videos mit Ton meist nicht von selbst ab, und unerwarteter Ton stört. Ein Hero-Video funktioniert ohne Ton.
Was ist Scrolljacking?
Wenn eine Website das normale Scrollen übernimmt, etwa Abschnitte erzwingt oder das Tempo verändert. Das fühlt sich für viele Besucher fremd an und sollte, wenn überhaupt, sehr behutsam eingesetzt werden.
Wie viele Animationen sind zu viel?
Wenn Bewegung vom Inhalt ablenkt, ist es zu viel. Ein, zwei starke Momente wirken meist hochwertiger als eine Seite, auf der sich alles bewegt.
Funktionieren Scroll-Animationen auf dem Handy?
Ja, wenn es eine eigene Handy-Fassung gibt: Hochformat, leichtere Dateien, angepasste Bewegung. Eine verkleinerte Desktop-Version ruckelt dagegen oft.