Wie erstelle ich mehrere Hintergrundbilder mit Parallaxe in CSS?

Parallax Scrolling ist eine häufig verwendete Designtechnik, die Webseiten ein Gefühl von Bewegung und Tiefe verleiht. Dies geschieht durch das Bewegen einzelner Seitenelemente mit unterschiedlicher Geschwindigkeit, um den Tiefeneffekt auf einer ebenen Fläche zu simulieren. Eine einzigartige und einfallsreiche Möglichkeit, diese Technik umzusetzen, besteht darin, mehrere Hintergrundbilder in CSS zu verwenden. In diesem Artikel erfahren Sie, wie Sie in CSS einen Parallaxeneffekt mit mehreren Hintergrundbildern erstellen, einschließlich der erforderlichen Schritte zum Einrichten der HTML-Struktur und des CSS-Stils. Egal, ob Sie Anfänger oder erfahrener Front-End-Entwickler sind, dieser Leitfaden vermittelt Ihnen das Wissen und die Werkzeuge, die Sie benötigen, um atemberaubende Parallaxeneffekte mit mehreren Hintergrundbildern zu erstellen.

Grammatik

element {
   background-image: url(image-location.jpg);
}

Hintergrundbildeigenschaften

Das Attribut „Hintergrundbild“ in CSS wird verwendet, um ein oder mehrere Bilder als Hintergrund von HTML-Elementen anzugeben. Dies ermöglicht die Kombination eines oder mehrerer Bilder als Grundlage für ein Element. Bilder können in einem bestimmten Bereich eines Elements positioniert werden, können so eingestellt werden, dass sie horizontal oder vertikal kopiert werden, oder können in der Größe geändert werden, um das gesamte Element oder nur einen Teil davon abzudecken.

element {
   animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}

Animationseigenschaften

Die CSS-Animationseigenschaft bietet die Möglichkeit, Animationen für HTML-Elemente ohne die Hilfe von JavaScript zu erstellen. Mit dieser Eigenschaft können Sie eine Folge von Keyframes während der Änderung eines Elements über einen bestimmten Zeitraum beschreiben. Diese Keyframes werden verwendet, um den Stil eines Elements zu verschiedenen Zeitpunkten darzustellen, während Animationseigenschaften steuern, wie ein Element von einem Keyframe zum anderen übergeht.

Hier finden Sie eine kurze Erklärung der einzelnen Komponenten der Animationseigenschaften –

• Name – Die Nomenklatur der Animation, die zur Referenzierung in @keyframes-Regeln verwendet wird.

• Duration – Die Dauer der Animation, die den Zeitraum angibt, den die Animation dauern soll, in Sekunden, ausgedrückt durch einen Zeitzeichenfolgenwert (z. B. „5s“).

• Timing-Funktion − Die Geschwindigkeitsbahn der Animation kann durch lineare, Ease-in, Ease-out, Ease-in und Ease-out oder eine benutzerdefinierte kubische Bézier-Funktion gesteuert werden.

• Delay – Die Verzögerung vor dem Start der Animation, gemessen in Sekunden (z. B. „2s“).

• Iterationsanzahl – Die Anzahl der Iterationen, die die Animation ausführen soll, oder der Begriff „unendlich“ bedeutet, dass die Animation in einer Endlosschleife fortgesetzt werden sollte.

• Richtung – Die Flugbahn der Animation, die „normal“ (in die übliche Richtung), „umgekehrt“ (in die entgegengesetzte Richtung) oder „alternativ“ abwechselnd vorwärts und rückwärts sein kann.

• Fill Mode – Gibt eine Methode an, um den nicht betriebsbereiten Zustand der Animation zu erfüllen. Zu den Optionen gehören „keine“, „vorwärts“, „rückwärts“ oder „beide“.

• Play-state – Gibt an, ob die Animation in Bewegung ist oder pausiert, dargestellt durch die Werte „running“ bzw. „paused“.

  李>

Methode

• Um mehrere Hintergrundbilder zu verwenden, um einen Parallaxeneffekt in CSS zu erzeugen, sollten Sie eine Reihe von Anweisungen befolgen −

• Stellt eine Komponente bereit, die Umgebungsdarstellungen enthält. Im aktuellen Fall ist die Komponente ein Div mit der Bezeichnung Parallax-Container.

• Definieren Sie die Höhe und Breite des Containerelements und setzen Sie die Überlaufeigenschaft auf ausgeblendet. Dadurch wird sichergestellt, dass nur der sichtbare Teil des Bildes angezeigt wird. Darüber hinaus wird die Positionseigenschaft auf relativ gesetzt, um sicherzustellen, dass die Position des Hintergrundbilds relativ zum Container ist.

• Erstellen Sie für jedes Hintergrundbild separate Elemente und stellen Sie deren Position auf absolute Positionierung ein. Dadurch kann jedes Bild präzise innerhalb des Containerelements positioniert werden. Die Höhe und Breite jedes Elements wird auf 100 % festgelegt, sodass es den gesamten Container ausfüllt.

• Legen Sie für jedes Element ein Hintergrundbild fest, indem Sie das Attribut „Hintergrundbild“ verwenden. Stellen Sie sicher, dass Sie für jedes einzelne Bild den genauen Dateipfad angeben.

• Erstellen Sie für jedes Element eine Animation, um das Hintergrundbild entlang der X-Achse zu verschieben. Dies erfolgt mithilfe von Animationseigenschaften in Verbindung mit der @keyframes-Regel. Die TranslateX-Eigenschaft wird zum Verschieben von Elementen verwendet, und der Wert, den Sie für diese Eigenschaft festlegen, bestimmt, wie weit sich das Element horizontal bewegt.

• Um ein reibungsloses und kontinuierliches Animationserlebnis aufrechtzuerhalten, wird dem Attribut „animation-timing-function“ ein linearer Wert zugewiesen, der angibt, dass die Animation während des gesamten Prozesses einen konsistenten Fortschritt beibehält. Darüber hinaus ist das Attribut „animation-iteration-count“ auf einen unendlichen Wert konfiguriert, was angibt, dass die Animation unendlich wiederholt wird, ohne dass die Anzahl der Schleifen vordefiniert ist.

Beispiel

wird übersetzt als:

Beispiel

Hier ist der vollständige Code, den wir uns in diesem Beispiel ansehen werden -

<!DOCTYPE html>
<html>
<head>
   <title>How to create multiple background image parallax in CSS?</title>
   <style>
      .parallax-container {
         height: 200px;
         width: 100%;
         overflow: hidden;
         position: relative;
      }
      .layer-1,
      .layer-2,
      .layer-3 {
         background-position: center;
         background-size: cover;
         position: absolute;
         height: 200px;
         width: 100%;
      }
      .layer-1 {
         background-image: linear-gradient(red,orange);
         animation: move-layer-1 15s linear infinite;
      }
      .layer-2 {
         background-image: linear-gradient(blue,lightblue);
         animation: move-layer-2 20s linear infinite;
      }
      .layer-3 {
         background-image: linear-gradient(green,lightgreen);
         animation: move-layer-3 25s linear infinite;
      }
      @keyframes move-layer-1 {
         0% {
            transform: translateX(0);
         }
         100% {
            transform: translateX(-30%);
         }
      }
      @keyframes move-layer-2 {
         0% {
            transform: translateX(0);
         }
         100% {
            transform: translateX(-60%);
         }
      }
      @keyframes move-layer-3 {
         0% {
            transform: translateX(0);
         }
         100% {
            transform: translateX(-90%);
         }
      }
   </style>
</head>
<body>
   <h4 id="How-to-create-multiple-background-image-parallax-in-CSS">How to create multiple background image parallax in CSS?</h4>
   <div class="parallax-container">
      <div class="layer-1"></div>
      <div class="layer-2"></div>
      <div class="layer-3"></div>
   </div>
</body>
</html>

Fazit

Zusammenfassend lässt sich sagen, dass das Erzeugen eines mehrschichtigen Hintergrundbild-Parallaxeneffekts in CSS eine einfache, aber leistungsstarke Technik ist, um Ihrer Website Dimension und Animation zu verleihen. Indem Sie die in dieser Anleitung beschriebenen Anweisungen befolgen, können Sie Ihrem Publikum ein optisch ansprechendes und ansprechendes Erlebnis bieten, das lange in Erinnerung bleiben wird. Unabhängig davon, ob Ihre Designwünsche einfach oder komplex sind, können Sie Ihr Design dank der Flexibilität von CSS an Ihre individuellen Anforderungen anpassen. Begeben Sie sich also auf diese Reise, um das Potenzial von Design zu erkunden und außergewöhnliche Ergebnisse zu erzielen!

Das obige ist der detaillierte Inhalt vonWie erstelle ich mehrere Hintergrundbilder mit Parallaxe in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!