Heim >Web-Frontend >CSS-Tutorial >CSS Infininite Slider drehen durch Polaroidbilder
CSS Infininite Slider drehen durch Polaroidbilder
- William ShakespeareOriginal
- 2025-03-09 12:28:15251Durchsuche
Im vorherigen Beitrag haben wir einen sehr coolen kleinen Schieberegler (oder, wenn Sie es bevorzugen, als "Karussell" nennen), das sich in kreisförmiger Richtung dreht. Dieses Mal werden wir einen Schieberegler machen, der den Polaroid -Bildstapel durchblättern kann.
Es ist cool, oder? Schauen Sie sich den Code nicht zuerst an, denn es gibt viele Dinge zu erklären. Mach mit?
CSS Slider -Serie
- kreisförmige Rotationsbild -Schieberegler
- polaroid Bildseite drehen Sie (Sie sind jetzt!)
- Infinite 3D Slider
Grundlegende Einstellungen
Die meisten HTML und CSS dieses Schiebereglers ähneln dem kreisförmigen Schieberegler, den wir beim letzten Mal gemacht haben. Tatsächlich verwenden wir genau den gleichen Marker:
<code><div> <img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src=""> </div></code>
Dies ist das grundlegende CSS, das unsere übergeordneten Container als Gitter setzt, und alle Bilder sind übereinander gestapelt: .gallery
<code>.gallery {
display: grid;
width: 220px; /* 控制大小 */
}
.gallery > img {
grid-area: 1 / 1;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border: 10px solid #f2f2f2;
box-shadow: 0 0 4px #0007;
}</code> Bisher gibt es nichts Kompliziertes. Selbst für Bilder im Polaroid-Stil verwende ich nur Grenzen und Schatten. Möglicherweise können Sie es besser machen, also können Sie diese dekorativen Stile ausprobieren! Wir werden den größten Teil unserer Energie in die Animation einbringen, was der schwierigste Teil ist. Was ist der Trick?
Die Logik dieses Schiebereglers hängt von der Stapelreihenfolge der Bilder ab - ja, wir werden
verwenden. Alle Bilder beginnen mit dem gleichen z-index -Wergium (2), wodurch das letzte Bild im Stapel oben sitzt. z-index
-Weicher des Bildes und schieben es zurück zum Deck. Da sein z-index Wert niedriger ist als der Rest der Bilder, wird er zum letzten Bild im Stapel. z-index
Stellen Sie sich jetzt den gleichen Trick vor, der auf alle Bilder angewendet wird. Wenn wir den
pseudo-selektor verwenden, um Bilder zu unterscheiden, dann ist dies das Muster: :nth-child()
- wir schieben das letzte Bild (n). Das nächste Bild ist sichtbar (n - 1).
- wir schieben das nächste Bild (n - 1). Das nächste Bild ist sichtbar (n - 2)
- wir schieben das nächste Bild (n - 2). Das nächste Bild ist sichtbar (n - 3)
- (Wir setzen den gleichen Prozess fort, bis wir das erste Bild erreichen)
- wir schieben das erste Bild (1). Das letzte Bild (n) ist wieder sichtbar.
Anatomie -Animation
Wenn Sie sich an den vorherigen Beitrag erinnern, habe ich nur eine Animation definiert und Verzögerungen verwendet, um jedes Bild zu steuern. Wir werden das Gleiche hier tun. Versuchen wir zunächst, die Zeitleiste der Animation zu visualisieren. Wir beginnen mit drei Bildern und verallgemeinern sie auf eine beliebige Zahl (n) Bilder.
Unsere Animation ist in drei Teile unterteilt: "Swipe Right", "Swipe Links" und "Nicht bewegt". Wir können die Verzögerung zwischen jedem Bild leicht identifizieren. Wenn wir der Meinung sind, dass das erste Bild bei 0S beginnt und die Dauer gleich 6s beträgt, beginnt das zweite Bild bei -2s und das dritte Bild beginnt bei -4s.
<code><div> <img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src=""> </div></code>
Wir können auch sehen, dass der Teil „Bewegung“ zwei Drittel der gesamten Animation (2*100%/3) einnimmt, während der Teil „Swipe Right“ und „Links“ zusammen ein Drittel aufnimmt-also entspricht jeder Teil 100%/6 der gesamten Animation.
Wir können Animationsschlüsselframes wie folgt schreiben:
<code>.gallery {
display: grid;
width: 220px; /* 控制大小 */
}
.gallery > img {
grid-area: 1 / 1;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border: 10px solid #f2f2f2;
box-shadow: 0 0 4px #0007;
}</code>
120% sind ein willkürlicher Wert. Ich brauche einen Wert von mehr als 100%. Das Bild muss sofort nach dem Rest der Bilder nach in den Rest der Bilder rutschen. Dazu muss es mindestens 100% seiner Größe bewegen. Deshalb habe ich mich für 120% entschieden - um zusätzlichen Platz zu bekommen.
Jetzt müssen wir z-index berücksichtigen. Vergessen Sie nicht, wir müssen die des Bildes aktualisieren, nachdem das Bild aus dem Stapel herausgeschlagen wurde und bevor wir zurück auf den Boden des Stapels rutschen.
Anstatt einen Staat mit 16,67% (100%/6) Punkte auf der Zeitachse zu definieren, definieren wir zwei Staaten an nahezu den gleichen Punkten (16,66% und 16,67%), wobei der z-index -Wartwert gesenkt wird, bevor wir das Bild zurück zum Deck schieben.
<code>.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 6s / 3 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 6s / 3 */</code> Das passiert, wenn wir all dies zusammenfügen:
z-index Nun, der Schiebeteil scheint gut zu funktionieren, aber die Stapelaufstellung ist alles durcheinander! Die Animation beginnt gut, weil sich das Bild oben nach hinten bewegt ... aber das nachfolgende Bild hält nicht mit. Wenn Sie es bemerken, kehrt das zweite Bild in der Sequenz an die Oberseite des Stapels zurück, bevor das nächste Bild auf die Spitze blitzt.
Wir müssen die Änderungen in
sorgfältig verfolgen. Zunächst haben alle Bilder: 2. Dies bedeutet, dass die Stapelreihenfolge ...
sein sollte
z-index wir schieben das dritte Bild und aktualisieren es z-index bis:
<code>@keyframes slide {
0% { transform: translateX(0%); }
16.67% { transform: translateX(120%); }
33.34% { transform: translateX(0%); }
100% { transform: translateX(0%); }
}</code>
wir machen dasselbe mit dem zweiten Bild: z-index
<code>@keyframes slide {
0% { transform: translateX(0%); z-index: 2; }
16.66% { transform: translateX(120%); z-index: 2; }
16.67% { transform: translateX(120%); z-index: 1; } /* 我们在这里更新 z-order */
33.34% { transform: translateX(0%); z-index: 1; }
100% { transform: translateX(0% ); z-index: 1; }
}</code>… und das erste Bild:
<code>我们的眼睛 ? --> 第三张 (2) | 第二张 (2) | 第一张 (2)</code>Wir haben das getan und alles schien in Ordnung zu sein. Aber in der Tat ist dies nicht der Fall! Wenn sich das erste Bild hinter sich bewegt, startet das dritte Bild eine andere Iteration, was bedeutet, dass es zu
: 2:
zurückkehrt<code>我们的眼睛 ? --> 第二张 (2) | 第一张 (2) | 第三张 (1)</code>
Also haben wir eigentlich überhaupt nicht alle Bilder: 2! z-index ist 1, wenn das Bild nicht bewegt wird (d. H. Der "mobile" Teil der Animation). Wenn wir das dritte Bild schieben und seinen
<code>我们的眼睛 ? --> 第一张 (2) | 第三张 (1) | 第二张 (1)</code>haben, befindet sich das letzte Bild in der Quellreihenfolge - in diesem Fall unser drittes Bild - oben im Stapel. Das Schieben des dritten Bildes führt zu den folgenden Ergebnissen:
z-index
z-index Das dritte Bild befindet sich noch oben, und danach verschieben wir das zweite Bild nach oben, wenn seine Animation mit z-index: 2 neu gestartet wird: z-index
<code><div> <img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src=""> </div></code>
Sobald wir es schieben, bekommen wir:
<code>.gallery {
display: grid;
width: 220px; /* 控制大小 */
}
.gallery > img {
grid-area: 1 / 1;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border: 10px solid #f2f2f2;
box-shadow: 0 0 4px #0007;
}</code>
Das erste Bild springt dann nach oben:
<code>.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 6s / 3 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 6s / 3 */</code>
Okay, ich bin verloren. Ist also alles Logik falsch?
Ich weiß, es ist verwirrend. Aber unsere Logik ist nicht völlig falsch. Wir müssen die Animation nur ein wenig korrigieren, damit alles so funktioniert, wie wir es wollen. Der Trick besteht darin, z-index richtig zurückzusetzen.
Betrachten wir den Fall, in dem sich das dritte Bild oben befindet:
<code>@keyframes slide {
0% { transform: translateX(0%); }
16.67% { transform: translateX(120%); }
33.34% { transform: translateX(0%); }
100% { transform: translateX(0%); }
}</code>
Wir sehen, wie das dritte Bild rutscht und es ändert z-index wird es oben halten. Was wir tun müssen, ist die z-index des zweiten Bildes zu aktualisieren. Bevor wir das dritte Bild vom Deck wegschieben, aktualisieren wir das zweite Bild z-index auf 2.
Mit anderen Worten, wir setzen das z-index des zweiten Bildes zurück, bevor die Animation endet.
grünes Pluszeichen bedeutet, z-index bis 2 zu erhöhen, und das rotes Minuszeichen hängt mit z-index: 1 zusammen. Das zweite Bild beginnt mit z-index: 2 und wenn es dann aus dem Deck herausrutscht, aktualisieren wir es auf 1. Bevor das erste Bild aus dem Deck herausrutscht, ändern wir das z-index des zweiten Bildes wieder auf 2. Dies stellt sicher, dass beide Bilder das gleiche z-index haben. Das dritte Bild befindet sich jedoch weiterhin oben, da es später im DOM erscheint. Aber nachdem das dritte Bild es gleitet und aktualisiert, bewegt es sich nach unten. z-index
<code>@keyframes slide {
0% { transform: translateX(0%); z-index: 2; }
16.66% { transform: translateX(120%); z-index: 2; }
16.67% { transform: translateX(120%); z-index: 1; } /* 我们在这里更新 z-order */
33.34% { transform: translateX(0%); z-index: 1; }
100% { transform: translateX(0% ); z-index: 1; }
}</code> Es ist ein bisschen besser, aber immer noch nicht gut genug. Es gibt eine andere Frage ... Oh nein, das wird niemals enden!
Mach dir keine Sorgen, wir ändern den Keyframe nicht wieder, da dieses Problem nur dann auftritt, wenn das letzte Bild beteiligt ist. Wir können eine "spezielle" Keyframe -Animation für das letzte Bild erstellen, um das Problem zu beheben.
Wenn das erste Bild oben ist, haben wir die folgende Situation:
<code>我们的眼睛 ? --> 第三张 (2) | 第二张 (2) | 第一张 (2)</code>Berücksichtigung der Anpassungen, die wir vor dem ersten Bild nach oben springen. Dies geschieht nur in diesem Fall, da das nächste Bild, das sich nach dem ersten Bild bewegt, das letztes
-Abbild höherer Ordnung im DOM ist. Der Rest der Bilder ist gut, weil wir n, dann n - 1, dann von 3 bis 2, von 2 bis 1 ... aber dann von 1 nach N gehen. Um dies zu vermeiden, verwenden wir den folgenden Keyframe für das letzte Bild:
Wir setzen den Wert
<code>我们的眼睛 ? --> 第二张 (2) | 第一张 (2) | 第三张 (1)</code>zurück, wenn die Animation auf 5/6 (und nicht auf zwei Drittel) geht, und das erste Bild wurde aus dem Stapel verschoben. Wir können also keine Sprünge sehen!
z-index Erfolg! Unser Infinity Slider ist jetzt perfekt! Hier geht es um unseren endgültigen Code:
Unterstützen Sie eine beliebige Anzahl von Bildern
<code>我们的眼睛 ? --> 第一张 (2) | 第三张 (1) | 第二张 (1)</code>
Jetzt funktioniert unsere Animation für drei Bilder. Lassen Sie es für eine beliebige Zahl (n) Bilder funktionieren. Aber zuerst können wir unsere Arbeit leicht optimieren, indem wir die Animation aufspalten, um Redundanz zu vermeiden:
<code><div> <img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src=""> </div></code>
Der Code ist einfacher zu lesen und zu warten! Wir erstellen eine Animation für den Sliding -Abschnitt und eine weitere Animation für das z-index Update. Bitte beachten Sie, dass wir z-index auf der steps(1) -Animation verwenden. Dies liegt daran, dass ich den z-index -Wartwert plötzlich ändern möchte, im Gegensatz zur Folienanimation, wo wir uns reibungslos bewegen möchten.
Jetzt ist der Code leichter zu lesen und zu warten. Wir können besser verstehen, wie wir eine beliebige Anzahl von Bildern unterstützen können. Wir müssen den Prozentsatz der Animationsverzögerungen und Keyframes aktualisieren. Die Verzögerung ist einfach, da wir mehrere Bilder im kreisförmigen Schieberegler mit der genauen Schleife unterstützen können, die wir im vorherigen Beitrag gemacht haben:
<code>.gallery {
display: grid;
width: 220px; /* 控制大小 */
}
.gallery > img {
grid-area: 1 / 1;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border: 10px solid #f2f2f2;
box-shadow: 0 0 4px #0007;
}</code>
Dies bedeutet, dass wir uns von normalem CSS zu SASS bewegen. Als nächstes müssen wir uns vorstellen, wie sich die Timeline mit N -Bildern ändert. Vergessen Sie nicht, dass die Animation in drei Phasen unterteilt ist:
Nach "nach rechts wischen" und "links wischen" sollte das Bild nicht bewegt bleiben, bis der Rest der Bilder die Sequenz abgeschlossen hat. Daher dauert der "direkte" Teil genauso wie (n - 1) wie "nach rechts wischen" und "links wischen". In einer Iteration werden n Bilder gleiten. Daher wischen beide nach rechts und wischen links 100%/n der gesamten Animationszeitleiste aus. Beide wischen nach rechts und wischen links aus, machen 100%/n der gesamten Animationszeitleiste aus. Das Bild rutscht aus dem Stapel bei (100%/n)/2 und rutscht bei 100%/n zurück.
wir können dies ändern:
<code>.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 6s / 3 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 6s / 3 */</code>
… bis zu diesem Punkt:
<code>@keyframes slide {
0% { transform: translateX(0%); }
16.67% { transform: translateX(120%); }
33.34% { transform: translateX(0%); }
100% { transform: translateX(0%); }
}</code>
Wenn wir N durch 3 ersetzen, erhalten wir bei 3 Bildern im Stapel 16,67% und 33,33%. Die Logik der Stapelreihenfolge ist die gleiche, wir haben:
<code>@keyframes slide {
0% { transform: translateX(0%); z-index: 2; }
16.66% { transform: translateX(120%); z-index: 2; }
16.67% { transform: translateX(120%); z-index: 1; } /* 我们在这里更新 z-order */
33.34% { transform: translateX(0%); z-index: 1; }
100% { transform: translateX(0% ); z-index: 1; }
}</code>
Wir müssen den 66,33% -Punkt noch aktualisieren. Hier sollte das Bild sein z-index zurücksetzt, bevor die Animation endet. In der Zwischenzeit beginnt das nächste Bild zu rutschen. Da für den Schiebeteil 100%/N erforderlich ist, sollte der Zurücksetzen bei 100% - 100%/n:
<code>我们的眼睛 ? --> 第三张 (2) | 第二张 (2) | 第一张 (2)</code>
Aber damit unsere z-order-last -Animation funktioniert, sollte es später in der Sequenz geschehen. Erinnerst du dich an die Fix, die wir auf das letzte Bild gemacht haben? Das Zurücksetzen des z-index -Wartwerts muss auftreten, wenn das erste Bild aus dem Stapel verschoben wird, nicht wenn er zu gleiten beginnt. Wir können dieselben Argumentation in Keyframes verwenden:
<code>我们的眼睛 ? --> 第二张 (2) | 第一张 (2) | 第三张 (1)</code>
Wir sind fertig! Hier sind die Ergebnisse, die bei der Verwendung von fünf Bildern erhalten wurden:
wir können einen kleinen Dreh hinzufügen, damit die Dinge schöner aussehen:
Alles, was ich getan habe, war rotate(var(--r)) dem transform -attribut angehängt. In einer Schleife definiert --r die Verwendung eines zufälligen Winkels:
<code>我们的眼睛 ? --> 第一张 (2) | 第三张 (1) | 第二张 (1)</code>
Rotation kann kleine Ausfälle erzeugen, da wir manchmal einige Bilder hinter dem Stapel springen, aber das spielt keine Rolle.
Zusammenfassung
all diese z-index Arbeit ist ein großer Balanceakt, oder? Wenn Sie nicht sicher sind, wie die Stapelauftrag vor dieser Übung funktioniert, können Sie jetzt ein besseres Verständnis dafür haben! Wenn Sie einige Erklärungen schwer zu verstehen finden, empfehle ich, diesen Artikel erneut zu lesen und den Inhalt mit Bleistift und Papier zu zeichnen. Versuchen Sie, verschiedene Bilder zu verwenden, um jeden Schritt der Animation zu veranschaulichen, um diese Technik besser zu verstehen.
Letztes Mal haben wir einige geometrische Tricks verwendet, um einen kreisförmigen Schieberegler zu erstellen, der nach Abschluss einer vollständigen Sequenz zum ersten Bild zurückdreht. Dieses Mal haben wir z-index verwendet, um eine ähnliche Technik zu vervollständigen. In beiden Fällen haben wir keine Bilder kopiert, um kontinuierliche Animationen zu simulieren, noch haben wir JavaScript verwendet, um die Berechnungen zu unterstützen.
Das nächste Mal werden wir 3D -Schieberegler machen. Bleiben Sie dran!
Das obige ist der detaillierte Inhalt vonCSS Infininite Slider drehen durch Polaroidbilder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!