Wie man erstellt: Parallax-Scrolling

Lernen Sie, wie Sie mit CSS den "Parallax"-Effekt erstellen.

Parallax-Scrolling

Parallax scrolling ist ein Trend im Webdesign, bei dem sich der Hintergrundinhalt (z.B. Bilder) während des Scrolling mit einer anderen Geschwindigkeit bewegt als der Vordergrundinhalt. Klicken Sie auf den folgenden Link, um den Unterschied zwischen Websites mit und ohne Parallax-Scrolling zu sehen.

Demonstration mit Differenzwanderungseffekt

Demonstration ohne Differenzwanderungseffekt

Hinweis:Die Differenzwanderung ist nicht immer auf mobilen Geräten / Smartphones effektiv. Sie können jedoch den Effekt mit Medienabfragen auf mobilen Geräten ausschalten (siehe letzten Beispiel auf dieser Seite).

Wie man den Effekt der Differenzwanderung erstellt

Verwenden Sie ein Container-Element und fügen Sie eine bestimmte Höhe des Hintergrundbildes hinzu. Dann verwenden Sie background-attachment: fixed Erstellen Sie den tatsächlichen Effekt der Differenzwanderung. Andere Hintergrundattribute werden verwendet, um das Bild zentral zu platzieren und perfekt zu skalieren:

Beispiel in Pixeln

<style>
.parallax {
  /* Das verwendete Bild */
  background-image: url("img_parallax.jpg");
  /* Eine bestimmte Höhe setzen */
  min-height: 500px;
  /* Erstellen Sie den Effekt der Differenzwanderung */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
/* Container-Element -->
<div class="parallax"></div>

Versuchen Sie es selbst

Der obige Beispiel verwendet Pixel, um die Höhe des Bildes zu setzen. Wenn Sie in Prozent, z.B. 100%, verwenden möchten, um das Bild auf den gesamten Bildschirm zu passen, stellen Sie die Höhe des Parallaxenbehälters auf 100% ein. Beachten Sie: Sie müssen auch height: 100% Anwendung auf <html> und <body>:

Beispiel in Prozenten

body, html {
  height: 100%;
}
.parallax {
  /* Das verwendete Bild */
  background-image: url("img_parallax.jpg");
  /* Volle Höhe */
  height: 100%;
  /* Erstellen Sie den Effekt der Differenzwanderung */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Versuchen Sie es selbst

Einige mobile Geräte verwenden background-attachment: fixed können Probleme verursachen. Ancak, mobil cihazlarda bu effekte kapatabilirsiniz:

Beispiel

/* Schaltet die Differenzwanderung für alle Tablets und Handys aus. Sie können die Pixel erhöhen oder verringern, falls erforderlich */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

Versuchen Sie es selbst

In diesem Code wird die Effekt der Differenzwanderung deaktiviert, wenn die Bildschirmbreite 1366 Pixel oder weniger beträgt, was für die meisten Tablets und Handys geeignet ist. Dies wird durch die Änderung erreicht .parallax 类的 background-attachment 属性从 fixed 到 scroll 来实现的。这样，背景图像就会随着页面的其余部分一起滚动，而不是固定在视口中。