Was du siehst
Im Startbereich schweben eine Kugel, ein Ring, ein Browserfenster und kleine Schlagwörter in verschiedenen Tiefen. Bewegt sich die Maus, neigt sich der ganze Raum leicht mit. Scrollt man weiter, fliegt die Kamera durch eine Reihe von Karten, die aus der Tiefe auf einen zukommen.
So ist es gebaut
Das Ganze ist reines HTML mit CSS-3D: Ein Container bekommt eine Perspektive, die Ebenen darin liegen mit translateZ in unterschiedlicher Tiefe. JavaScript verändert beim Scrollen nur noch einen Wert – die Position der Kamera – und GSAP sorgt für weiche Übergänge.
Weil alles normale Elemente bleiben, sind Texte lesbar, auswählbar und für Suchmaschinen sichtbar. Und es läuft auch auf älteren Geräten flüssig.
Woher die Idee kommt
CSS-3D gibt es seit Jahren in allen Browsern, wird aber selten mutig eingesetzt. Wir wollten zeigen, wie viel Tiefe ohne WebGL möglich ist.
Darauf achten wir
- Keine 3D-Bibliothek, sehr kleine Datenmenge
- Ruhige Fassung ohne Flug für „Bewegung reduzieren“
- Auf dem Handy weniger Ebenen