Gewusst wie: Parallax-Scrolling
Erfahren Sie, wie Sie mit CSS einen „Parallax“-Scrolling-Effekt erstellen.
Parallaxe
Parallax Scrolling ist ein Website-Trend, bei dem der Hintergrundinhalt (dh ein Bild) beim Scrollen mit einer anderen Geschwindigkeit als der Vordergrundinhalt bewegt wird. Klicken Sie auf die Links unten, um den Unterschied zwischen einer Website mit und ohne Parallax-Scrolling zu sehen.
Hinweis: Parallax-Scrolling funktioniert nicht immer auf Mobilgeräten/Smartphones. Sie können den Effekt jedoch über Medienabfragen auf mobilen Geräten ausschalten (siehe letztes Beispiel auf dieser Seite).
So erstellen Sie einen Parallax-Scrolling-Effekt
Verwenden Sie ein Containerelement und fügen Sie dem Container ein Hintergrundbild mit einer bestimmten Höhe hinzu. Verwenden Sie dann den background-attachment: fixed
, um den eigentlichen Parallax-Effekt zu erzeugen. Die anderen Hintergrundeigenschaften werden verwendet, um das Bild perfekt zu zentrieren und zu skalieren:
Beispiel mit Pixeln
<style>
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Set
a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position:
center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<!-- Container element
-->
<div class="parallax"></div>
Das obige Beispiel verwendete Pixel, um die Höhe des Bildes festzulegen. Wenn Sie Prozent verwenden möchten, z. B. 100 %, damit das Bild den gesamten Bildschirm ausfüllt, stellen Sie die Höhe des Parallax-Containers auf 100 % ein. Hinweis: Sie müssen auch für height: 100%
<html> und <body> gelten:
Beispiel mit Prozent
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Full height */
height: 100%;
/* Create the parallax
scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
Einige mobile Geräte haben ein Problem mit background-attachment: fixed
. Sie können jedoch Medienabfragen verwenden, um den Parallax-Effekt für mobile Geräte auszuschalten:
Beispiel
/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if
needed */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}