Unendlich scrollendes Hintergrundbild

Die Idee hierbei ist, das Erscheinungsbild einer Diashow ohne das Karussell-Element zu erzeugen. Mit anderen Worten, wir erstellen eine Reihe von Bildern, die von links nach rechts gleiten und sich wiederholen, sobald das Ende der Bilder erreicht ist.

Der Trick besteht darin, dass wir ein einzelnes Hintergrundbild mit CSS-Animationen verwenden, um es über den Bildschirm zu bewegen und zu wiederholen, wenn es fertig ist. Dies erzeugt die Illusion einer Bildergalerie, obwohl wir in Wirklichkeit ein einzelnes Bild verwenden.

Einrichten des HTML

Hier ist ein Entwurf dafür, wie unser HTML strukturiert sein muss

Es gibt zwei Elemente, mit denen wir arbeiten: das eine nennen wir .container, das genau in die Breite des Viewports passt, und ein anderes namens .sliding-background, das hinter dem .container liegt und diesen überlappt. Im Wesentlichen nutzen wir den .container als Maske, um die volle Breite des .sliding-background zu verbergen, während er über den Bildschirm scrollt.

Das bedeutet, wir müssen nur zwei Elemente im HTML-Markup erstellen

<div class="container">
  <div class="sliding-background"></div>
</div>

Positionieren der Elemente

Lassen Sie uns fortfahren und etwas CSS hinzufügen, das unsere beiden Elemente korrekt positioniert.

.container {
  overflow: hidden;
}

.sliding-background {
  height: 500px;
  width: 5076px;
}

Unser .container verwendet die overflow-Eigenschaft, die alles verbirgt, was visuell außerhalb davon liegt. Denken Sie daran wie an einen Zuschnitt bei einem Foto. Es mag zwar zusätzliche Inhalte außerhalb des Containers geben, aber der Container verhindert, dass wir sie sehen.

Hier kommt unser .sliding-background ins Spiel. Er ist auf eine enorme Breite eingestellt, die die meisten Viewports überragt. Und das ist der Trick: Er sollte so groß sein, dass er den Container überlappt. In diesem Fall verwenden wir eine etwas willkürlich gewählte Breite von 5076px, die die meisten Browser-Viewports überschreiten sollte.

Erstellen des Hintergrundbildes

Wir brauchen ein Bild, wenn wir die Illusion einer Diashow-Galerie erzeugen wollen, richtig? Das ist unser nächster Punkt auf der Tagesordnung.

Erinnern Sie sich, wie wir die etwas willkürlich gewählte Breite von 5076px für den gleitenden Hintergrund erwähnt haben? Nun, sie ist zwar willkürlich, aber in dem Sinne beabsichtigt, dass sie gut durch 3 teilbar ist, was in das Timing für eine einminütige Schleife passt, auf die wir gleich noch kommen werden. Das bedeutet, die Arbeitsfläche für unser Hintergrundbild ist 5076 / 3 bzw. 1692px. Am Ende wird sich unser Hintergrund insgesamt dreimal in einer Minute in einer Endlosschleife wiederholen. Mathe gewinnt!

Die Höhe von 500px ist wirklich willkürlich. Sie kann beliebig gewählt werden, solange sie auch der tatsächlichen Größe der Hintergrundbilddatei entspricht.

Die Photoshop-Datei, die zur Erstellung des Hintergrundbildes für die Demo am Anfang dieses Kapitels verwendet wurde, steht zum Download bereit, falls Sie einen Ausgangspunkt suchen.

Sobald das Bild gespeichert (und optimiert!) wurde, verwenden wir es als Hintergrundbild im CSS

.sliding-background {
  background: url("..path/to/image") repeat-x;
  height: 500px;
  width: 5076px; /* The image width times 3 */
}

Großartig! Das gibt uns das gigantische Bild, das den Container überlappt und nun dazu verwendet werden kann, bis ins Unendliche über den Bildschirm zu scrollen.

Animieren des Hintergrunds

Alles klar, lassen Sie uns das Ding in Bewegung setzen. Wir möchten, dass es in einer Schleife von links nach rechts läuft, die sich immer wieder wiederholt, um einen nahtlosen Effekt zu erzeugen, als ob das Bild ewig weiterginge.

Zuerst definieren wir die CSS-Animation

@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-1692px, 0, 0); /* The image width */
  }
}

Wir verwenden die transform-Eigenschaft, um das linke Bild am linken Rand des Containers zu positionieren, wenn die Animation beginnt, und zwar so

Bis die Animation abgeschlossen ist, hat sie die Position negativ (von links nach rechts) um einen Betrag transformiert, der genau der Breite unseres Bildes entspricht. Und da der .sliding-background dreimal so breit ist wie das eigentliche Bild, wiederholt sich das Bild dreimal zwischen 0 % und 100 %, bevor die Schleife von vorne beginnt.

Der Grund, warum wir überhaupt ein zusätzliches <div> verwenden, anstatt background-position auf dem Hauptelement zu animieren, ist, dass wir ein animiertes transform für die Bewegung nutzen können, was wesentlich performanter ist.

Okay, schließen wir die Sache ab, indem wir unsere slide-Animation für die Klasse .sliding-background aufrufen

.sliding-background {
  background: url("..path/to/image") repeat-x;
  height: 560px;
  width: 5076px;
  animation: slide 60s linear infinite;
}

Die Eigenschaft animation weist .sliding-background an, die slide-Animation zu verwenden und sie jeweils eine Minute lang in einer linearen Endlosschleife auszuführen.

Alles zusammengefügt

<div class="container">
  <div class="sliding-background"></div>
</div>

.container {
  overflow: hidden;
}

.sliding-background {
  background: url("..path/to/image") repeat-x;
  height: 560px;
  width: 5076px;
  animation: slide 60s linear infinite;
}

@keyframes slide{
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-1692px, 0, 0);
  }
}