A
R
A
L
L
A
X
Parallax - die simple CSS-Methode
Der Parallax-Effekt, mit dem eine gewisse Tiefenwirkung erzielt werden soll, im besten Fall eine Art 3D-Effekt erzeugt wird, lässt sich auf einfache Weise mit CSS realisieren: Im Prinzip wird lediglich ein Hintergrundbild mittels background-attachment: fixed; am Monitor bzw. Display fest verankert. Dem Background-Image wird also eine feste Position am Bildschirm zugewiesen. Beim Scrollen bleibt dieses fixierte Bild somit an seiner Position, während sich der übrige Inhalt der Webseite an ihm vorbeischiebt.
CSS plus HTML sehen im einfachsten Fall so aus:
<style>
/* CSS */
#BgImageFixed {
width: 100%;
height: 140px;
background-image: url(bild-url.png);
background-attachment: fixed;
}
</style>
<!-- HTML -->
<div id="BgImageFixed">Content über dem Background-Image</div>
Und so erscheint's dann am Monitor:
Zum Verständnis: Der DIV-Container, dem das fixierte Background-Image zugeordnet ist, eröffnet gewissermaßen eine Viewbox, also ein 'Guckloch' auf das Hintergrundbild. Und beim Scrollen schiebt sich dieses Sichtfenster über den feststehenden, also nicht mitscrollenden Hintergrund (der sich im obigen Beispiel durch background-repeat: repeat über das ganze Browserfenster spannt). Die Ausmaße des Containers (im obigen Beispiel width: 100% und height: 150px) bestimmen dabei die Größe der Viewbox, haben aber keinerlei Einfluss auf das dem DIV zugeordnete Hintergrundbild. Dieses Bild nämlich ist durch background-attachment: fixed aus dem Dimensionen- und auch Positions-Kontext seines DIVs herausgelöst worden. Beides hängt nun vom Viewport ab.
Um dies zu verdeutlichen, nachfolgend zwei DIV-Container mit identischem Background-Image - nun aber per background-repeat: no-repeat als kleines Einzelbild. Im ersten Fall ist es nicht fixiert, daher lässt es sich mittels background-position: center in der Mitte des DIVs zentrieren (der Parallax-Effekt entfällt dann selbstverständlich). Im zweiten Fall, nun ist das Hintergrundbild fixiert und damit aus dem DIV-Kontext herausgelöst, wird es per background-position: center in der Mitte des Browserfensters (Viewports) positioniert, und zwar zentriert sowohl in horizontaler, als auch in vertikaler Richtung. Es wird daher erst sichtbar, wenn das 'Guckloch' in der Mitte des Browserfensters angekommen ist:
Um diesen in der Regel nicht gewollten Effekt zu vermeiden, um also das fixierte Hintergrundbild bereits beim Erscheinen des zugehörigen DIVs in dessen Mitte zu platzieren, brauch's JavaScript. Wie das genau geht, lässt sich beim WordPress-Plugin "Advanced WordPress Backgrounds" abschauen.
Für den Parallax-Scrolling-Effekt werden allerdings meistens sehr große Bilder verwendet und diese durch background-size: cover über den kompletten Viewport gezogen - zum Beispiel mit folgendem CSS:
<style>
/* CSS */
#parallaxContainer {
width: 100%;
height: 100vh;
background-image: url(bild-url.png);
background-attachment: fixed;
background-position: center;
background-size: cover;
}
</style>
<!-- HTML -->
<div id="parallaxContainer">Content über dem Parallax-Image</div>
Beispiel auf codepen.io: "Fixed background parallax scroll".
Parallax - die beeindruckende CSS-Methode
Neben der simplen gibt es auch noch eine wirklich beeindruckende Methode, den Parallax-Scrolling-Effekt per CSS zu erstellen. Hierfür werden mehrere (gut aufeinander abgestimmte) Bilder übereinander gelegt und dann in unterschiedlicher Geschwindigkeit mitgescrollt. Möglich machen dies die "3D Translations" von CSS, eine Kombination von position, perspective und transform (eine gute Anleitung hierzu gibts bei LogRocket). Der CSS-Aufwand hierfür ist recht überschaubar - die eigentliche Kunst liegt in der Herstellung der Bilder. Beispiel hierfür: Firewatch Parallax in CSS.
Die Bilder sind nun nicht mehr als Background Images eingebunden, sondern liegen als 'normaler' Inhalt in je einem Parallax-Layer. Das bedeutet, dass es nicht immer Bilder sein müssen - ganz normaler Text funktioniert auch. Hier ein ganz grundlegendes Beispiel von Keith Clark aus dem Jahr 2014: "Pure CSS Parallax Scroll Demo #3". Dort unbedingt auf "Debug" klicken!
