Die Idee hier ist, das Erscheinungsbild einer Diashow ohne Karussell zu erstellen. Mit anderen Worten, wir machen eine Reihe von Bildern auf der Folie von links nach rechts und wiederholen sie, sobald das Ende der Bilder erreicht ist. Der Trick ist, dass wir ein einzelnes Hintergrundbild mit CSS-Animationen verwenden, um (…)
Die Idee hier ist, das Erscheinungsbild einer Diashow ohne Karussell zu erstellen. Mit anderen Worten, wir machen eine Reihe von Bildern auf der Folie von links nach rechts und wiederholen sie, 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 verschieben und zu wiederholen, wenn es fertig ist. Dies erzeugt die Illusion einer Bildergalerie, wenn wir wirklich ein einzelnes Bild verwenden.
HTML einrichten
Hier ist ein Entwurf, wie unser HTML strukturiert werden muss:
Es gibt zwei Elemente, mit denen wir arbeiten: das eine, das wir aufrufen und .containerdas genau der Breite des Ansichtsfensters entspricht, und das andere, das wir aufrufen und .sliding-backgrounddas sich hinter dem befindet .containerund überläuft. Im Wesentlichen verwenden wir das .containerals Maske, um die gesamte Breite des zu verbergen, .sliding-backgroundwenn es über den Bildschirm rollt.
Das heißt, wir müssen nur zwei Elemente im HTML-Markup erstellen:
Positionieren der Elemente
Lassen Sie uns fortfahren und CSS hinzufügen, das unsere beiden Elemente korrekt positioniert.
.container ( overflow: hidden; ) .sliding-background ( height: 500px; width: 5076px; )Wir .containerverwenden die overflowEigenschaft, die alles verbirgt, was außerhalb visuell enthalten ist. Stellen Sie es sich wie eine Ernte auf einem Foto vor. Es kann zusätzliches Material außerhalb des Containers geben, aber der Container verhindert, dass wir es sehen.
Hier .sliding-backgroundkommt unser ins Spiel. Es ist auf eine lächerliche Breite eingestellt, die die meisten Ansichtsfenster überlaufen würde. Und das ist der Trick: Es sollte etwas sein, das den Container überlaufen würde. In diesem Fall verwenden wir eine etwas willkürlich gewählte 5076pxBreite, die die meisten Browser-Ansichtsfenster überlaufen sollte.
Hintergrundbild erstellen
Wir brauchen ein Bild, wenn wir die Illusion einer Diashow-Galerie erzeugen, oder? Das ist unsere nächste Aufgabe.
Erinnern Sie sich, wie wir erwähnt haben, dass die etwas willkürlich gewählte 5076pxBreite für den gleitenden Hintergrund? Nun, es ist willkürlich, aber beabsichtigt in dem Sinne, dass es gut durch 3 teilbar ist, was in das Timing für eine minutenlange Schleife passt, die etwas später auftauchen wird. Das heißt, die Leinwand für unser Hintergrundbild ist 5076 / 3oder 1692px. Am Ende wiederholt sich unser Hintergrund in einer Endlosschleife insgesamt dreimal in einer Minute. Mathe für den Sieg!
Die 500pxHöhe ist wirklich beliebig. Das kann alles sein, was Sie wollen und solange es auch die tatsächliche Größe der Hintergrundbilddatei ist.
Die Photoshop-Datei, mit der zu Beginn dieses Kapitels das Hintergrundbild für die Demo erstellt wurde, kann heruntergeladen werden, wenn Sie nach einem Ausgangspunkt suchen.
Sobald das Bild gespeichert (und optimiert!) Wurde, verwenden wir Folgendes 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 über den Container läuft und jetzt verwendet werden kann, um ad infinitum über den Bildschirm zu scrollen.
Hintergrund animieren
Okay, lass uns das Ding bewegen. Wir möchten, dass es in einer Schleife, die sich immer wieder wiederholt, von links nach rechts verläuft, um einen nahtlosen Effekt zu erzielen, bei dem das Bild für immer erhalten bleibt.
Definieren wir zunächst die CSS-Animation:
@keyframes .slide ( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); /* The image width */ ) )Wir verwenden die transformEigenschaft, um das linke Bild am linken Rand des Containers zu positionieren, wenn die Animation beginnt.
Bis die Animation abgeschlossen ist, hat sie die Position negativ (von links nach rechts) um einen Betrag verändert, der der exakten Breite unseres Bildes entspricht. Und da das .sliding-backgrounddreimal so breit wie das eigentliche Bild ist, wiederholt sich das Bild dreimal zwischen 0% und 100%, bevor es erneut wiederholt wird.
Hinweis: Der Grund, warum wir eine zusätzliche verwenden
background-positionauf der Hauptseite zu animieren transform, um die Bewegung zu machen, die viel performanter ist.
OK, lassen Sie uns die Sache abrunden, indem wir unsere slideAnimation für die .sliding-backgroundKlasse aufrufen :
.sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; )Die animationEigenschaft weist den Benutzer .sliding-backgroundan, die slideAnimation zu verwenden und jeweils eine Minute lang in einer linearen Endlosschleife auszuführen.
Alles zusammenfügen
.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); ) )