Selamat siang teman-teman!
Bosan dengan JS, beralihlah ke CSS!
Tantangan
Buat tayangan slide animasi menggunakan CSS. Rangkai salindia dapat digunakan, misalnya, dalam acara-acara khusus untuk menampilkan foto di layar melalui proyektor. Melalui perulangan, foto yang ditampilkan dapat berfungsi sebagai latar belakang untuk pidato yang serius.
Solusi yang mungkin
Untuk tayangan slide kita akan mengambil "foto makro" aneh
Paweł Czerwiński (mereka keren).
Jadi ayo pergi.
Markup kami akan terlihat seperti ini:
<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>
Apa yang kita amati di sini?
Foto dibungkus dalam kelas slideshow, yang digunakan untuk meluruskan elemen secara horizontal dan vertikal.
.slonton memiliki gaya berikut:
.slideshow { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; }
Kami memiliki 6 foto. Setiap foto diberi kelas "i_number of photos". Di bawah setiap foto ada tanda tangan dengan kelas "jumlah foto".
Img memiliki gaya berikut:
img { position: absolute; max-width: 90vw; max-height: 80vh; opacity: 0; animation: slideshow 36s ease-in-out infinite; }
Waktu animasi tergantung pada jumlah foto dan waktu tampilan setiap foto. Dalam hal ini: 6 foto masing-masing selama 6 detik.
Mari beralih ke animasi:
@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; } }
Kami hanya menggunakan 25% dari animasi, tetapi dalam enam langkah. 25% adalah bagian keempat, sehingga foto akan sedikit tumpang tindih. Karena kami menerapkan efek "fade in-fade out", mis. Kami bekerja dengan transparansi, inilah yang kami butuhkan.
Dengan bantuan "filter: grayscale" kami memenuhi warna foto yang ditampilkan (diputihkan), dengan bantuan "transform: scale" kami membuat skala foto sedikit maju saat menghasilkan dan sedikit kembali ketika mengganti, menggunakan "filter: blur" kami mengaburkan foto yang diganti.
Selanjutnya, kami bekerja dengan foto individual:
.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); }
Kami mengatur penundaan animasi untuk setiap foto (6 detik dari yang pertama dan +6 detik dari setiap foto berikutnya). Untuk perubahan, kami menggeser dan memutar setiap foto menggunakan "transform: translate rotate" (nilai dipilih secara empiris).
Kami menyelesaikan fotonya. Sekarang mari kita ke tanda tangan.
P memiliki gaya berikut:
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; }
Waktu animasi untuk keterangan sesuai dengan waktu untuk animasi foto.
Animasi tanda tangan terlihat jauh lebih mudah:
@keyframes title { from { opacity: 0; } 5% { opacity: 1; } 20% { opacity: 1; } 25% { opacity: 0; } }
Kami juga menampilkan tanda tangan terpisah menggunakan penundaan animasi:
.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; }
Harap perhatikan bahwa penundaan animasi teks adalah 1 detik lebih dari nilai foto yang sesuai. Ini dilakukan untuk menampilkan takarir setelah penampilan dan transformasi foto tertentu.
Itu saja. Menurut saya, ternyata sederhana, tetapi menarik.
Hasilnya bisa dilihat di
sini .
Terima kasih atas perhatian anda Semua yang terbaik