So haben wir diese Website gebaut: ein Film, der beim Scrollen läuft

Wer unsere Startseite öffnet, sieht einen kurzen Film namens „Lights, Camera, Against": Eine Lampe geht an, Licht und Kamera werden vorbereitet, ein Objektiv öffnet sich, und am Ende erscheint das A von Against aus Licht. Am Computer läuft der Film nicht von allein. Er bewegt sich beim Scrollen vorwärts und spult zurück, wenn man zurückscrollt. In diesem Beitrag erklären wir, wie das funktioniert.

Warum Scrollen?

Der erste Bildschirm einer Agenturwebsite ist meist ein Showreel oder eine große Headline. Wir wollten, dass Besucher das Tempo des Films selbst bestimmen. Scrollen macht aus Zuschauern Regisseure. Die vier Szenen des Films sind mit vier Headlines verbunden: Wechselt die Szene, wechselt auch die Headline.

Was technisch passiert

Ein Video, das per Scrollen läuft, muss anders vorbereitet werden als ein normales. Beim Komprimieren wird meist nur alle paar Sekunden ein vollständiges Bild gespeichert, die Bilder dazwischen enthalten nur Änderungen. Springt man beim Scrollen hin und her, kann es deshalb ruckeln. Wir haben den Film so neu codiert, dass alle 8 Bilder ein vollständiges Bild kommt. Die Datei wurde etwas größer, dafür ist jedes Bild schnell erreichbar.

Das Video wird komplett geladen, bevor das Scrollen übernimmt. In der Zeit sind ein kleiner Ladering und das erste Bild des Films zu sehen. Das Scrollen steuert das Video nicht direkt, sondern über eine Ebene, die die Bewegung glättet. So läuft der Film auch bei schnellem Scrollen flüssig.

Bewegung im Stillstand

Steht die Seite still, friert der Film nicht ein. Er bewegt sich ganz langsam um das aktuelle Bild hin und her, als würde er atmen. So wirkt der Bildschirm nie wie ein Foto.

Auf dem Smartphone anders

Video per Scrollen zu steuern, kostet auf dem Handy Akku und Daten und fühlt sich mit dem Finger nicht gleich an. Deshalb läuft auf Smartphones eine leichtere Fassung des Films in Schleife. Die Headlines wechseln weiterhin mit den Szenen, und ein Button hält den Film an.

Für alle, die weniger Bewegung möchten

Wer im Betriebssystem „Bewegung reduzieren" eingestellt hat, sieht keinen laufenden Film, sondern das letzte Bild mit der letzten Headline. Barrierefreiheit ist für uns Teil des Designs, kein späterer Zusatz. Mehr dazu in unserem Beitrag zum Barrierefreiheitsstärkungsgesetz.

Tempo

Die Desktop-Fassung des Films ist rund 3,4 MB groß, die Handy-Fassung 1,1 MB. Der Rest der Seite funktioniert, während der Film lädt. Wie wir videolastige Websites schnell halten, steht im Beitrag zu Core Web Vitals.

Am Ende

Der erste Bildschirm einer Website ist der erste Satz einer Marke. Unserer ist ein Film, und wir wollten ihn den Besuchern in die Hand geben. Wenn Sie über ein ähnliches Erlebnis für Ihre Website nachdenken, finden Sie mehr auf unserer Seite zu Webdesign und Entwicklung.