Verwenden Sie CSS3, um einen Scroll-Parallaxeneffekt zu erzielen

In diesem Artikel wird hauptsächlich das Tutorial zur Verwendung von CSS3 zum Erzielen des Scroll-Parallaxeneffekts vorgestellt. Es wird hauptsächlich das Attribut „Hintergrundanhang“ verwendet.

Der „Parallaxeneffekt“ ist Mittlerweile wird es im Internet immer beliebter. Wenn Sie noch nichts vom Parallaxeneffekt gehört haben: Dabei handelt es sich tatsächlich um einen Effekt, der durch die Verwendung von Bildern zur Bildung verschiedener Ebenen und deren Bewegung mit unterschiedlichen Geschwindigkeiten und Richtungen entsteht. Dadurch entsteht ein wunderbarer visueller Effekt, der die Aufmerksamkeit des Betrachters wirkungsvoll auf sich ziehen kann.

Im Webdesign ist die Verwendung des jQuery-Plug-ins die häufigste Methode, um einen Parallaxeneffekt zu erzielen. Dieser Ansatz hat jedoch einige Nachteile. Die meisten dieser Plug-Ins platzieren Listener für das Scroll-Ereignis des Fensterobjekts. Dies führt dazu, dass JavaScript eine große Anzahl von Ereignisauslösern verarbeiten muss (die Verarbeitung von Scroll-Ereignissen kann leicht zu Problemen mit der Browserleistung führen, daher müssen Sie bei der Verwendung sehr vorsichtig sein). Verschieben verschiedener Ebenen, Berechnen der Position des Hintergrunds und Festlegen von Eigenschaften des Bildes verursachen alle große Probleme bei der DOM-Manipulation.

Kurz gesagt führt die Verwendung von JavaScript zur Erzielung von Parallaxeneffekten zu Leistungsproblemen und Verzögerungen beim Scrollen der Seite.

Hintergrundanhangsattributüberprüfung
Hintergrundanhang – Definieren Sie, wie sich das Hintergrundbild mit der Scroll-Achse bewegt
Werte: scroll | fest |. Das Hintergrundbild bewegt sich beim Scrollen der Seite
behoben: Das Hintergrundbild bewegt sich beim Scrollen der Seite nicht
erben: erben
Anfangswert: scrollen
Vererbung: nein
anwendbar in: Alle Elemente
Hintergrund: Hintergrund.Anhang: Anhang.
Beispiel

body    
{   
 background-image:url('list-orange.png');   
 background-attachment:fixed;   
 background-repeat:repeat-x;   
 background-position:center center;   
}

Das Hintergrundbild des Bildschirms ist eine orangefarbene Linie Die visuelle Position bleibt unverändert.

Beispiel für eine CSS-Hintergrundanhangseigenschaft

Verwenden Sie „background-attachment: Fixed“, um einen Parallaxeneffekt zu erzielen.

Warum nur wenige Menschen wissen Das? Dieser Effekt kann tatsächlich mit CSS erreicht werden.

Um den Parallaxeneffekt zu erzielen, müssen mehrere Hintergrundbilder auf verschiedenen Elementen platziert werden. Diese Hintergrundbilder müssen als „background-attachment:fixed“ definiert werden. Durch Festlegen des Hintergrundanhangs können wir den Effekt und die Position des Hintergrundbilds ändern.

Der Standardwert von „background-attachment“ ist scroll, was bedeutet, dass die Position des Hintergrundbilds und des Inhalts relativ statisch ist. Wir alle kennen das: Wenn wir auf einer Webseite nach oben und unten scrollen, scrollen Hintergrund und Inhalt gleichzeitig.

Interessant wird es, wenn der Hintergrundanhang auf „Fest“ eingestellt ist. Fest bedeutet, dass das Hintergrundbild nicht mit dem Inhalt scrollt, sondern mit dem Fenster stationär bleibt. Das heißt, wenn Sie die Bildlaufleiste ziehen, ändert sich das Hintergrundbild nicht. Dadurch entsteht ein schöner Parallaxeneffekt.

Lassen Sie mich eine praktische Implementierung sehen:

<!-- Four containers for setting the background images -->   
<p class="parallax">   
  <p class="bg__foo">foo</p>   
  <p class="bg__bar">bar</p>   
  <p class="bg__baz">baz</p>   
  <p class="bg__bazz">bazz</p>   
</p>   
// setting base styles to image containers   
[class*="bg__"] {   
  height: 50vh;   
  text-indent: -9999px;   
  /* fix background */
  background-attachment: fixed;   
  /* center it */
  background-position: center center;   
  /* Scale it nicely to the element */
  background-size: cover;   
  /* just make it look a bit better  */
  &:nth-child(2n) {   
    box-shadow: inset 0 0 1em #111;   
  }   
}   
.bg__foo {   
  background-image: url(   
    http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax1.jpg   
  );   
}   
.bg__bar {   
  background-image: url(   
    http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax2.jpg   
  );   
}   
.bg__baz {   
  background-image: url(   
    http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax3.jpg   
  );   
}   
.bg__bazz {   
  height: 100vh;   
  background-image: url(   
    http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax1.jpg   
  );   
}

Bezüglich der Browserkompatibilität dieser Technologie können Sie hier nachlesen, grundsätzlich unterstützen moderne Browser und IE9+ alle Browser .

Ich persönlich bevorzuge den Parallaxeneffekt, der mit der CSS-Technologie erzielt wird, gegenüber der Verwendung von JavaScript. Es wird mit CSS implementiert und nativ vom Browser unterstützt. Es gibt keine Programmierlogik und keine zusätzlichen Operationen im DOM, was die gesamte Lösung sehr einfach und schön macht.

Selbst der durch CSS implementierte Parallaxeneffekt belastet den Browser.

Hintergrundanhang: Behoben führt dazu, dass der Browser mehr rendert und beeinträchtigt auch die Effizienz des Browser-Scrollens. Daher müssen Sie während der Entwicklung weitere Tests durchführen, um den Effekt anhand der Leistung zu ermitteln.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Einführung in die Verwendung des 3D-Rotationseffekts von CSS3

Analyse von CSS-Float und -Position

So legen Sie mit CSS3 eine Listentrennlinie ohne Ober- und Unterkante fest

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS3, um einen Scroll-Parallaxeneffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!