3D-Scroll-Animation für Websites.
Beim Scrollen entsteht ein Haus, fährt ein Produkt auseinander, wächst ein Dach Schicht für Schicht. So funktioniert Scrollytelling mit Three.js — mit dem Grundprinzip im Code und den Fehlern, die aus einem Erlebnis eine Qual machen.
Bei einer 3D-Scroll-Animation wird die Scrollposition in einen Fortschrittswert zwischen 0 und 1 umgerechnet. Dieser Wert steuert, was in der Szene passiert: Kamerafahrt, Aufbau, Explosion. Der Besucher bestimmt das Tempo selbst — das ist der Unterschied zu einem Video.
Warum Scrollen und nicht Video?
Ein Video läuft, egal ob der Zuschauer mitkommt. Eine Scroll-Animation wartet auf ihn. Wer genauer hinsehen will, scrollt langsamer. Wer zurück will, scrollt zurück. Das macht Scrollytelling so wirksam für Abläufe, die man verstehen soll: Bauprozesse, Produktaufbau, Montage.
Dazu kommt ein handfester Vorteil: Ein 3D-Scroll-Erlebnis ist oft kleiner als ein vergleichbares Video in guter Qualität, und es bleibt auf jedem Bildschirm scharf.
Das Grundprinzip.
Die Scrollposition eines Abschnitts wird in einen Wert von 0 bis 1 übersetzt. Mehr braucht es im Kern nicht:
const abschnitt = document.getElementById('story');
let ziel = 0, aktuell = 0;
// 0 = Abschnitt beginnt, 1 = Abschnitt ist durchgescrollt
function fortschritt() {
const r = abschnitt.getBoundingClientRect();
const strecke = r.height - innerHeight;
return Math.min(1, Math.max(0, -r.top / strecke));
}
addEventListener('scroll', () => { ziel = fortschritt(); }, { passive: true });
renderer.setAnimationLoop(() => {
// weich nachziehen statt ruckartig springen
aktuell += (ziel - aktuell) * 0.08;
// Beispiel: Dach senkt sich zwischen 30 % und 60 % ein
const t = THREE.MathUtils.clamp((aktuell - 0.3) / 0.3, 0, 1);
dach.position.y = THREE.MathUtils.lerp(4, 0, t);
kamera.position.z = THREE.MathUtils.lerp(9, 5, aktuell);
renderer.render(scene, kamera);
});Das weiche Nachziehen in der Mitte ist der Unterschied zwischen „fühlt sich hochwertig an“ und „ruckelt beim Scrollen mit dem Mausrad“. Für komplexe Abläufe nutzen viele Projekte GSAP mit ScrollTrigger, das Prinzip bleibt dasselbe.
Die fünf Fehler, die Besucher vergraulen.
1. Scroll-Kaperung
Die Seite reagiert nicht mehr normal aufs Scrollen, sondern zwingt einen eigenen Rhythmus auf. Nutzer fühlen sich die Kontrolle entzogen und springen ab. Die Animation sollte dem Scrollen folgen, nicht es ersetzen.
2. Zu lange Strecken
Wer zehn Bildschirmhöhen scrollen muss, um eine Info zu bekommen, gibt auf. Pro Etappe sollten ein bis zwei Bildschirmhöhen genügen.
3. Kein Text
Die Szene erklärt sich für den Entwickler von selbst — für den Besucher nicht. Kurze Texte je Etappe führen durch die Geschichte und sind gleichzeitig das, was Google von der Seite sieht.
4. Kein Ausweg auf dem Handy
Auf schwachen Geräten ruckelt die Szene und macht die Seite unbenutzbar. Eine vereinfachte Fassung oder statische Bilder für leistungsschwache Geräte gehören dazu.
5. Bewegungsempfindlichkeit ignoriert
Manche Menschen reagieren auf starke Bewegung mit Unwohlsein. Die Einstellung prefers-reduced-motion sollte respektiert werden und die Animation dann reduzieren.
Wofür es sich eignet.
- Bauunternehmen: Vom Fundament bis zur Übergabe
- Handwerk: Aufbau eines Dachs, einer Heizung, eines Bades
- Produkte: Aufbau und Innenleben Schicht für Schicht
- Prozesse: Fertigungsabläufe, die man sonst nie zu sehen bekommt
Nicht glauben — ausprobieren.
Alle Demos laufen live im Browser, auch auf dem Smartphone.
Auf dem Handy flüssig bleiben.
Scroll-Animationen werden auf dem Desktop gebaut und auf dem Handy erlebt — dort entscheidet sich, ob der Effekt begeistert oder nervt. Drei Dinge helfen am meisten. Erstens die Auflösung begrenzen: Auf Displays mit hoher Pixeldichte muss nicht in voller Auflösung gerechnet werden, eine Obergrenze von 1,5 spart viel Rechenzeit, ohne dass es auffällt. Zweitens pausieren, sobald die Szene aus dem Bild gescrollt ist oder der Tab im Hintergrund liegt — das schont den Akku spürbar. Drittens das Modell klein halten: Eine Szene, die erst nach acht Sekunden erscheint, hat ihre Wirkung verloren, bevor sie beginnt (GLB verkleinern). Auf sehr alten Geräten ist ein statisches Bild als Ersatz besser als ein ruckelnder Effekt. Weitere Stellschrauben: Three.js Performance optimieren.
Rücksicht auf Bewegung und Barrieren.
Kamerafahrten und Parallax-Effekte können bei Menschen mit Gleichgewichtsstörungen Schwindel auslösen. Wer im Betriebssystem „Bewegung reduzieren“ eingeschaltet hat, sollte deshalb eine ruhige Fassung sehen: Die Szene bleibt stehen oder wechselt in weichen Überblendungen zwischen den Stationen. Genauso wichtig ist, dass die Geschichte auch ohne 3D funktioniert. Überschriften und Text gehören als normales HTML auf die Seite, nicht in die Grafik — dann lesen sie auch Screenreader und Suchmaschinen. Ausführlich: 3D-Websites barrierefrei gestalten.
Wann sich der Aufwand lohnt.
Eine Scroll-Animation lohnt sich, wenn ein Produkt oder ein Ablauf erklärungsbedürftig ist und Bilder allein es nicht schaffen: ein Bauablauf, der Aufbau einer Maschine, die Funktionsweise eines Geräts. Sie lohnt sich nicht als reine Dekoration auf einer Seite, die sonst nichts zu sagen hat. Wer unsicher ist, startet mit einer einzelnen Sektion statt einer ganzen Startseite: ein Abschnitt, der beim Scrollen ein Produkt zusammensetzt, ist schnell gebaut und zeigt, wie Besucher reagieren. Für eine ruhigere Variante eignet sich ein 3D-Hintergrund, für eine geführte Erklärung eine Ansicht mit Hotspots.
FAQ — 3D-Scroll-Animation für Websites.
Was ist eine 3D-Scroll-Animation?
Bei einer 3D-Scroll-Animation steuert die Scrollposition des Besuchers, was in einer 3D-Szene passiert. Die Position wird in einen Fortschrittswert zwischen 0 und 1 umgerechnet, der Kamerafahrten, Aufbauten oder Explosionsbewegungen antreibt. Der Besucher bestimmt das Tempo selbst.
Ist Scrollytelling schlecht für SEO?
Nicht, wenn die Seite ein echtes Textfundament hat. Die 3D-Szene selbst ist für Suchmaschinen unsichtbar, kurze Texte je Etappe dagegen nicht. Sie helfen gleichzeitig den Besuchern, der Geschichte zu folgen.
Brauche ich dafür GSAP?
Nicht zwingend. Das Grundprinzip lässt sich mit wenigen Zeilen eigenem JavaScript umsetzen. Für komplexe Abläufe mit vielen Etappen ist GSAP mit ScrollTrigger aber eine bewährte Hilfe, weil es Zeitleisten und das Anheften von Abschnitten vereinfacht.
Funktioniert das auf dem Smartphone?
Ja, wenn die Szene für mobile Geräte optimiert ist. Für leistungsschwache Geräte sollte es eine vereinfachte Fassung geben, und die Animation muss dem normalen Scrollverhalten folgen, statt es zu blockieren.
Was kostet eine 3D-Scroll-Animation?
Eine durchdachte Scroll-Story mit mehreren Etappen liegt meist im Bereich zwischen 6.000 und 15.000 Euro, abhängig von der Zahl der Etappen und dem Modellaufwand. Diese Zahlen sind Orientierung und keine Fixpreise.
Das bin ich – rechts im BildErzähl mir, was du zeigen willst.
Ich sage dir ehrlich, ob sich 3D für dein Vorhaben lohnt — und wenn nicht, was stattdessen mehr bringt.
Antwort meist innerhalb von 24 Stunden · hallo@manuelkillert.de