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.
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