Guten Tag, Freunde!
Müde von JS, wechseln Sie zu CSS!
Herausforderung
Erstellen Sie eine animierte Diashow mit CSS. Eine Diashow kann beispielsweise zu besonderen Anlässen verwendet werden, um Fotos auf dem Bildschirm über den Projektor anzuzeigen. Durch Schleifen können die angezeigten Fotos als Hintergrund für eine feierliche Rede dienen.
Mögliche Lösung
Für die Diashow machen wir das seltsame "Makrofoto"
Paweł Czerwiński (sie sind cool).
Also lass uns gehen.
Unser Markup sieht folgendermaßen aus:
<div class="slideshow"> <img src="https://thebestcode.ru/media/animatedSlideshow/1.jpg" alt="#" class="i_1"> <p class="p_1">a-slide</p> <img src="https://thebestcode.ru/media/animatedSlideshow/2.jpg" alt="#" class="i_2"> <p class="p_2">b-slide</p> <img src="https://thebestcode.ru/media/animatedSlideshow/3.jpg" alt="#" class="i_3"> <p class="p_3">c-slide</p> <img src="https://thebestcode.ru/media/animatedSlideshow/4.jpg" alt="#" class="i_4"> <p class="p_4">d-slide</p> <img src="https://thebestcode.ru/media/animatedSlideshow/5.jpg" alt="#" class="i_5"> <p class="p_5">e-slide</p> <img src="https://thebestcode.ru/media/animatedSlideshow/6.jpg" alt="#" class="i_6"> <p class="p_6">f-slide</p> </div>
Was beobachten wir hier?
Fotos werden in eine Diashow-Klasse eingeschlossen, mit der Elemente horizontal und vertikal ausgerichtet werden.
.slideshow hat die folgenden Stile:
.slideshow { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; }
Wir haben 6 Fotos. Jedem Foto ist die Klasse "i_Anzahl Fotos" zugeordnet. Unter jedem Foto befindet sich eine Signatur mit der Klasse „p_nummer des Fotos“.
Img hat die folgenden Stile:
img { position: absolute; max-width: 90vw; max-height: 80vh; opacity: 0; animation: slideshow 36s ease-in-out infinite; }
Die Animationszeit hängt von der Anzahl der Fotos und der Anzeigezeit jedes Fotos ab. In diesem Fall: 6 Fotos für jeweils 6 Sekunden.
Fahren wir mit der Animation fort:
@keyframes slideshow { from { opacity: 0; filter: grayscale(100%); } 5% { opacity: 1; filter: grayscale(50%); } 10% { opacity: 1; filter: grayscale(0); transform: scale(1.1); } 15% { opacity: 1; filter: blur(0); } 20% { opacity: 0; filter: blur(2px); transform: scale(0.9); } 25% { opacity: 0; } }
Wir verwenden nur 25% der Animation, jedoch in sechs Schritten. 25% ist der vierte Teil, sodass sich die Fotos leicht überlappen. Da wir den "Einblenden-Ausblenden" -Effekt implementieren, d.h. Wir arbeiten mit Transparenz, genau das brauchen wir.
Mit "Filter: Graustufen" sättigen wir die Farbe des angezeigten (gebleichten) Fotos. Mit "Transform: Skalieren" skalieren wir das Foto bei der Ausgabe ein wenig nach vorne und beim Ersetzen ein wenig nach hinten. Mit "Filter: Unschärfe" verwischen wir das ersetzte Foto.
Als nächstes arbeiten wir mit einzelnen Fotos:
.slideshow .i_1 { animation-delay: 6s; transform: translateX(-100px) rotate(-3deg); } .slideshow .i_2 { animation-delay: 12s; transform: translateX(100px) rotate(3deg); } .slideshow .i_3 { animation-delay: 18s; transform: translateY(-100px) rotate(3deg); } .slideshow .i_4 { animation-delay: 24s; transform: translateY(100px) rotate(-3deg); } .slideshow .i_5 { animation-delay: 30s; transform: rotate(-6deg); } .slideshow .i_6 { animation-delay: 36s; transform: rotate(6deg); }
Wir stellen die Animationsverzögerung für jedes Foto ein (6 Sekunden für das erste und +6 Sekunden für jedes weitere). Zur Abwechslung verschieben und drehen wir jedes Foto mit "transform: translate rotate" (die Werte wurden empirisch ausgewählt).
Wir haben das Foto fertiggestellt. Kommen wir nun zu den Unterschriften.
P hat die folgenden Stile:
p { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #e4e4e4; text-shadow: 0 0 1px #000; text-transform: uppercase; font-size: 2.8em; opacity: 0; animation: title 36s linear infinite; }
Die Animationszeit für die Untertitel entspricht der Zeit für die Fotoanimation.
Die Signaturanimation sieht viel einfacher aus:
@keyframes title { from { opacity: 0; } 5% { opacity: 1; } 20% { opacity: 1; } 25% { opacity: 0; } }
Wir zeigen auch eine separate Signatur mit Animationsverzögerung an:
.slideshow .p_1 { animation-delay: 7s; } .slideshow .p_2 { animation-delay: 13s; } .slideshow .p_3 { animation-delay: 19s; } .slideshow .p_4 { animation-delay: 25s; } .slideshow .p_5 { animation-delay: 31s; } .slideshow .p_6 { animation-delay: 37s; }
Bitte beachten Sie, dass die Animationsverzögerung von Bildunterschriften 1 Sekunde länger ist als die entsprechenden Fotowerte. Dies geschieht, um Untertitel nach dem Erscheinen und der Umwandlung eines bestimmten Fotos anzuzeigen.
Das ist alles. Meiner Meinung nach war es einfach, aber interessant.
Das Ergebnis ist hier zu sehen.
Danke für die Aufmerksamkeit. Alles Gute.