Vom Schreibtisch in die Welt: meine erste Scroll-Story-Website
Eine Website, die nur durchs Scrollen erzählt: vom Arbeitsplatz über meine Bücher bis zur Auslieferung weltweit. Was dahintersteckt und wie die Technik funktioniert.
Uli Ortlieb
10/31/20263 min read
Ein Instagram-Reel, ein Samstagmorgen und ein Gedanke, der mich nicht mehr losgelassen hat: Kann eine Website ein Unternehmen vorstellen, ohne dass man irgendwo klicken muss? Nur scrollen, und die Seite erzählt den Rest?
Das Reel zeigte die Website einer Spedition. Eine kleine 3D-Welt wie eine Modelleisenbahn: Lagerhalle, LKW, Hafen, Flughafen. Beim Scrollen fährt die Kamera von Station zu Station. Ich fand das großartig. Und ich wollte wissen, ob ich so etwas für Beiltro Solutions selbst bauen kann.
Kann ich. Das Ergebnis heißt zoom-me.
Was ist eine Scroll-Story-Website?
Ich nenne das Ganze eine Scroll-Story-Website. Die Seite hat kein Menü, keine Unterseiten und kein Formular. Sie ist ein kleiner Film, und du bestimmst mit dem Mausrad oder dem Daumen, wie schnell er läuft. Scrollst du weiter, fährt die Kamera weiter. Hältst du an, bleibt sie stehen.
Für ein kleines Unternehmen finde ich das spannend. Statt „Über uns“, „Produkte“ und „Kontakt“ einzeln anzuklicken, erlebt man alles in einem Rutsch: wer dahinter steckt, was es gibt und wie es zu dir kommt.
Was du beim Scrollen siehst
1. Mein Arbeitsplatz. Die Seite startet auf einem Monitor auf meinem Schreibtisch. Auf dem Bildschirm läuft beiltro.com. Beim ersten Scrollen fährt die Kamera ein Stück zurück, die Website scrollt nach oben und ein kurzes Video von Meli und mir läuft direkt im Monitor.
2. Die Bücher. Weiter zurück. Aus dem Bücherstapel auf dem Tisch fliegen meine Cover nach oben und reihen sich auf: das Duell Buch, das Silvester Duell, der Krimi-Duell-Adventskalender, Emma & Emre, „Lasst mich bloß in Ruhe!“, Trash or Nothing. Ganz am Ende kommt „Sarahs Stimme“. Daneben erscheint ein Handy und der Trailer startet, auf Wunsch mit Ton.
3. Die Miniaturwelt. Dann zoomt die Kamera aus dem Raum heraus, das Bild verschwimmt kurz, und du landest in einer kleinen Welt: Bürohaus, Druckerei mit Förderband, Versandhalle mit LKW, ein Güterzug mit pinkem Portalkran, Hafen mit Containerschiff, Flughafen mit startendem Flugzeug. Überall steht „Beiltro Solutions“ drauf. Auf der Halle, auf den LKW, auf der Lok, am Schiff und am Flugzeug.
4. Die ganze Welt. Zum Schluss ein Globus. Von Baden-Württemberg aus ziehen pinke Bögen in alle Richtungen. Daneben die Links zu beiltro.com und zu meiner Amazon-Autorenseite.
Am besten probierst du es selbst aus. Am Desktop wirkt es am stärksten, auf dem Handy läuft es aber auch.
Die Technik dahinter
Für alle, die wissen wollen, wie das funktioniert. Ich halte es kurz.
3D im Browser. Die komplette Szene läuft mit Three.js direkt im Browser. Es gibt kein Video und keine vorgerenderten Bilder. Schreibtisch, Lampe, Pflanze, Hallen, Fahrzeuge und Globus entstehen aus Code. Die Fahrzeuge fahren wirklich, der Kran hebt Container, das Flugzeug rollt aus dem Hangar und startet.
Scrollen steuert die Kamera. Die Seite ist eigentlich sehr lang, man sieht davon aber nur das feste 3D-Bild. Die Scrollposition wird in eine Kamerafahrt übersetzt. Die Stationen sind als Punkte festgelegt, dazwischen läuft die Kamera auf einer weichen Kurve. Damit es nicht ruckelt, wenn man am Mausrad dreht, sitzt dazwischen eine Art Federung. Die Kamera fährt sanft an und bremst sanft ab.
Eine echte Website im 3D-Monitor. Was auf dem Bildschirm am Schreibtisch läuft, ist kein Foto. Es ist echtes HTML mit echter Schrift und einem echten Video, eingepasst in die 3D-Szene. Deshalb bleibt die Schrift auch beim Heranzoomen scharf.
Der Modellbahn-Look. Dass die Welt wie eine Miniatur aussieht, liegt an einem Trick aus der Fotografie, dem Tilt-Shift-Effekt. Die Mitte des Bildes ist scharf, oben und unten wird es unscharf. Unser Auge liest das als „klein“. Dazu kommen weiche Schatten und eine Kamera, die schräg von oben schaut.
Videos fürs Web. Meine Handyvideos lagen im Format H.265 vor. Das sieht gut aus, viele Browser spielen es aber nicht ab. Ich habe sie deshalb in H.264 umgewandelt, das läuft überall. Nebenbei sind die Dateien viel kleiner geworden, beim Trailer von 36 auf knapp 8 MB.
Handy-Version. Auf dem Smartphone dreht sich der Monitor auf dem Schreibtisch hochkant und zeigt die mobile Ansicht der Website. Die Kamera geht näher ran, und aufwendige Effekte werden dort sparsamer eingesetzt, damit es flüssig bleibt.
Alles auf meinem eigenen Server. Schriften, Bibliotheken, Bilder und Videos liegen alle bei mir auf dem Webspace. Es wird nichts von Google oder anderen Diensten nachgeladen.
Gebaut mit Claude. Ich habe die Seite zusammen mit Claude gebaut, Schritt für Schritt. Ich habe gesagt, was ich sehen will, getestet und Rückmeldung gegeben. Zum Beispiel, dass die Flugzeuge in der ersten Version aussahen, als würden sie rückwärts fliegen. Die Flügel waren nach vorne gepfeilt. Ist inzwischen repariert.
Für wen ist so etwas interessant?
Für alle, die ein Produkt oder einen Ablauf zeigen wollen, den man sonst nur schwer erklären kann. Eine Schreinerei, die zeigt, wie aus dem Brett ein Tisch wird. Eine Bäckerei vom Mehl bis zur Theke. Ein Betrieb, der seine Fertigung in einer Minute erklären will.
zoom-me ist ein Konzept und eine Spielwiese. Aber es zeigt ziemlich gut, was heute im Browser möglich ist.
Schau es dir an und sag mir, wie es bei dir läuft: 👉 https://landingpage.beiltro.com/zoom-me/
Uli
Design
info@beiltro.com
© 2026. All rights reserved.
Social Media Team