Sternenhimmel – 3D Hintergrund mit Parallax mit reinem CSS

18 Dez
18. Dezember 2008
Dieser Artikel ist eine Übersetzung des englischen Originals von Chris Coyer auf css-Tricks.com einige Dinge (Hyperlinks, Texte, Bilder) wurden von mir ergänzt.

Falls Du den Hintergrund von Silverback noch nicht gesehen hast, dann schau ihn Dir mal an. Der Gorilla ist von Jon Hicks designed (ja, genau die Seite mit dem Border-Trick). Wenn Ihr Silverback besucht, dann ändert die Fenstergröße des Browsers, damit ihr den coolen Parallax-Effekt (Parallaxe, Bewegungsparallaxe, Englische Erklärung zu Prallax) bei den Blättern am oberen Bildschirmrand sehen können. Die Seite selbst ist von Paul Annett designed. Er schrieb auch einen Artikel auf “Think Vitamin” wie er den Prallax-Effekt erstellt hat. Chris hat diesen Effekt und die Technik ein wenig genauer erklärt und bietet auch einen Download dazu an (Anm.: Ich stelle ihn am Ende des Artikels ebenfalls zur Verfügung).
Was ist ein Parallax?
Stell Dir den Parallax so vor: Es ist genau das, was Du siehst wenn Du aus dem Fenster eines fahrenden Zuges schaust. Die Büsche und Bäume am Bahndamm flitzen vorbei, während die Schafe dahinter sich langsamer bewegen. Die Berge ganz im Hintergrund bewegen sich dagegen fast gar nicht. Parallax hat eine grundlegende Verbindung zur Astronomie. Nicht nur weil Si-Fi-Filme disen Effekt immer wieder benutzen um diese coolen Weltraumeffekte zu generieren, sondern weil die Wissenschaft diesen Effekt benutzt um die Entfernungen von Sternen zu ermitteln, welche außerhalb unseres Sonnensystems liegen.

Mehrere Hintergründe mit Prallax.
In Respekt gegenüber diesen erstaunlichen Effekt und seiner Verbindung zur Wissenschaft, erstellte Chris “Starry Night” (Anm.: Fenstergröße ändern nicht vergessen!). “Starry Night” ist ein Ganzseiten-Effekt mit drei Ebenen. Entfernte Sterne bewegen sich bei einer Änderung der Fenstergrößen nur ein wenig, während nähere Sterne sich schneller bewegen. Dieser Effekt wurde mit drei Elementen erstellt, welche die gesamte Fenstergröße des Browsers einnehmen. Der “body” (Hintergrund), eine div-Ebene “midground” und eine weitere div-Ebene “foreground”.

<body>
<div id="midground"></div>
<div id="foreground"></div>
</body>

Der body-Tag füllt das Browserfenster komplett aus, aber die beiden div-Layer müssen wir über css und absolute Positionierung erst dazu zwingen:

body {
background: url(images/background.png) repeat 5% 5%;
}
#midground {
background: url(images/midground.png) repeat 20% 20%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 997;
}
#foreground {
background: url(images/foreground.png) repeat 90% 110%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 998;
}

Beide png-Dateien, der “midground” und der “foreground” besitzen eine Alpha-Transparenz. Dadurch liegen sie übereinander und sind doch durchscheinend. Das wichtigste sind die Prozent-Werte am Ende der background-Attribute. Normalerweise kontrollieren diese die horizontale und verticale Positionierung des Hintergrunds. Hier können sie aber als “Wie schnell bewegst du dich?” verstanden werden. Du kannst auch einen Wert über 100% verwenden. Dies bedeutet, dass sich die Sterne schneller bewegen, als die Größenänderung des Browserfensters.

Leider funktioniert der Effekt für IE6 und kleiner nicht. Auf Grund der  Bugs in der png-Darstellung und der absoluten Positionierung hat es auch keinen Sinn einen “Work-Around” zu erstellen. In Chris’ Beispiel wird ein bedingtes Stylesheet verwendet, um eine Warnmeldung anzuzeigen.

Und wie kann ich meinen Inhalt auf den Hintergrund legen?
Das liegt jetzt an Dir. Schau mal auf Chris’ Beispiel-Seite: Links oben ist zusätzlicher Content zu sehen. Du kannst es ähnlich machen. Erstelle einfach einen neuen div-Layer, welcher einen höheren z-Index als die bestehenden Hintergrund-Layer hat (sonst siehst Du zwar alles, kannst es aber nicht anklicken). Auch muss dieser “Content-Layer” absolut positioniert werden.

Download des Beispiels “StarryNight”
in der zip-Datei sind alle html’s, css’, png’s und psd’s enthalten.

Der Link zum Original-Artikel: http://css-tricks.com/3d-parralax-background-effect/

Tags: , ,