Scroll-Animations-Website-Builder

Ein Satz baut eine Seite, auf der Scrollen die Kamera bewegt: in eine Szene hineintauchen, hinausfliegen, in der nächsten landen, ohne Schnitt.

Katagiri High — The Last Light, in der Horimiya-Welt für diese Seite gebaut. Scrolle im Rahmen: drei Szenen, zwei Nahtstellen, ein durchgehender Flug.

The Descent — eine Kristallbrücke windet sich in die Schlucht, Szenentext und Navigation im Bild

The Hollow Star — der Thronsaal vom Gang aus gesehen, Szenentitel The Hollow Center

Odyssey — der Zyklop füllt die Höhle, Szenentitel The Cyclops

Scroll of Colossal Things — ein walgroßer Wal unter einem kleinen Boot, Tuschestil

SENGOKU — Das Lager erwacht — Akt I von drei. Das Scrollen senkt die Kamera durch die Banner bis zur Zeltreihe; auf der Seite steht SCROLL TO DESCEND, und sie hält es. — **Das Lager erwacht** — Akt I von drei. Das Scrollen senkt die Kamera durch die Banner bis zur Zeltreihe; auf der Seite steht SCROLL TO DESCEND, und sie hält es.

SENGOKU — Das Feld der Klingen — Akt II. Kein Schnitt zum Schlachtfeld — dieselbe Kamera überquert die rote Brücke, Speere und Trommeln kommen ringsum auf. — **Das Feld der Klingen** — Akt II. Kein Schnitt zum Schlachtfeld — dieselbe Kamera überquert die rote Brücke, Speere und Trommeln kommen ringsum auf.

SENGOKU — Die weiße Burg — Akt III. Der Flug endet auf dem Bergfried und bietet an, die Welt erneut zu fliegen. Drei Szenen, zwei Nähte, null Überblendungen. — **Die weiße Burg** — Akt III. Der Flug endet auf dem Bergfried und bietet an, die Welt erneut zu fliegen. Drei Szenen, zwei Nähte, null Überblendungen.

Five Realms — Tor im Mondlicht — Erstes der fünf Reiche. Der Sturz beginnt vor dem Bogen und geht mitten hindurch — das Tor ist ein Ort, den die Kamera wirklich passiert. — **Tor im Mondlicht** — Erstes der fünf Reiche. Der Sturz beginnt vor dem Bogen und geht mitten hindurch — das Tor ist ein Ort, den die Kamera wirklich passiert.

Five Realms — Flüsternder Bambuspfad — Zweites Reich. Die Verbindung lässt das Tor hinter dir, statt zum nächsten Standbild aufzulösen. — **Flüsternder Bambuspfad** — Zweites Reich. Die Verbindung lässt das Tor hinter dir, statt zum nächsten Standbild aufzulösen.

Five Realms — Klippen über dem Wolkenmeer — Drittes Reich. Text und Datenzeilen bleiben lesbar, während die Kamera durch die Wolken steigt. — **Klippen über dem Wolkenmeer** — Drittes Reich. Text und Datenzeilen bleiben lesbar, während die Kamera durch die Wolken steigt.

Homer’s Odyssey — Ithaka: Der Aufbruch — Neun Szenen aus einem Masterbild — Hafen, Schiffe und Licht gehören zu einer Welt. — **Ithaka: Der Aufbruch** — Neun Szenen aus einem Masterbild — Hafen, Schiffe und Licht gehören zu einer Welt.

Homer’s Odyssey — Troja: Das Pferd — Zweite Szene. Der Übergang vom Hafen ist ein erzeugter Clip, keine Überblendung: Das Feuer ist da, bevor du den Wechsel bemerkst. — **Troja: Das Pferd** — Zweite Szene. Der Übergang vom Hafen ist ein erzeugter Clip, keine Überblendung: Das Feuer ist da, bevor du den Wechsel bemerkst.

Homer’s Odyssey — Das weindunkle Meer — Dritte Szene. Die Navigationspunkte springen zwischen Szenen; das Rad scrubbt weiterhin jedes Bild dazwischen. — **Das weindunkle Meer** — Dritte Szene. Die Navigationspunkte springen zwischen Szenen; das Rad scrubbt weiterhin jedes Bild dazwischen.

LIVE PROOF

Live ansehen.

Öffne das Werk und nutze es hier.

Eine Scroll-Seite ist ein Flug, keine Diashow.

Studio erzeugt die Welt, ein 16:9-Standbild pro Szene und die Kamera-Clips, die dich zwischen ihnen tragen. Ausgeliefert wird reines HTML und Vanilla-JavaScript: Die Scrollposition setzt die Videozeit, also läuft es auf dem Handy, braucht kein Framework und wiegt etwa drei kurze Videos.

Nähte statt Schnitte — Jede Verbindung entsteht aus dem letzten Bild des einen und dem ersten Bild des nächsten Clips. Die Fuge ist identisch, nicht überblendet.
Ein Look über alle Szenen — Jedes Szenenbild stammt von einem Masterbild ab. Der Hafen aus Szene eins ist derselbe Hafen in Szene drei.
Eine Seite, kein Video — Du bekommst eine veröffentlichte URL zum Öffnen, Forken und Versenden. Szenentitel, Kicker, Datenzeilen und Navigationslabels sind bearbeitbares HTML.

Was vor dem Bauen gefragt wird.

Was ist eine Scroll-Animations-Website?

Eine Seite, auf der Scrollen nicht nur die Seite bewegt, sondern eine Kamera führt. Jede Scrollposition ist ein Videobild, also fliegt der Besucher im eigenen Tempo durch die Szene, statt einen Clip anzusehen.

Brauche ich GSAP oder Three.js?

Nein. Die Engine ist reines JavaScript und scrubbt vorgerenderte Clips über die Scrollposition. Sie lässt sich in eine GSAP- oder Next.js-Seite setzen, nötig ist keins von beiden.

Mit wie vielen Szenen anfangen?

Drei. Das sind in 16:9 rund 25 MB Video — schnell geladen und schon als Reise lesbar. Jede weitere Szene bringt zwei Clips, etwa 9 MB mehr.

Funktioniert es auf dem Handy?

Ja. Kleine Bildschirme bekommen eine 640×360-Version, das Scrubben folgt dem Touch-Scroll; die schweren Desktop-Clips werden dort gar nicht geladen.

Was steckt in einem Bau?

Drei Standbilder, drei Sturz-Clips und zwei Verbindungen, also acht erzeugte Assets. Frag Studio vor dem Start nach Clipzahl und Modell — Video ist der langsame, bezahlte Teil.

Kann ich die Texte später ändern?

Ja. Szenentitel, Kicker, Datenzeilen und Navigationslabels sind normales HTML in der veröffentlichten Seite. Worte ändern, ohne ein Bild neu zu rendern.

Was passiert, wenn eine Generierung scheitert?

Der Bau stoppt und nennt den Clip, der gescheitert ist. Er füllt die Lücke nicht mit Platzhaltergrafik — eine falsche Szene bricht die Naht und damit die Illusion.

Geht eine bestehende IP oder eigenes Artwork?

Ja. Szenen können von einem Referenzbild abstammen, und die Welten auf dieser Seite wurden in bestehenden IP-Welten gebaut. Bring ein Character Sheet oder Key Visual mit, wenn der Look zu etwas passen muss.

Gib einem Ort drei Stationen.

Studio erzeugt die Szenen, die Stürze und die Nähte und veröffentlicht eine Seite, die du scrollen und verschicken kannst. Starte mit dem Hafen unten oder schreib deinen eigenen Ort.

Liyue-Nachtmarkt bauen