Slider tak terhingga CSS membalikkan imej polaroid

Dalam jawatan terdahulu, kami membuat gelangsar kecil yang sangat sejuk (atau, jika anda lebih suka, panggil ia "karusel") yang berputar ke arah bulat. Kali ini, kami akan membuat slider yang boleh membalikkan tumpukan imej Polaroid.

Ia sejuk, bukan? Jangan melihat kod terlebih dahulu, kerana terdapat banyak perkara untuk dijelaskan. Sertailah saya?

CSS Slider Series

slider gambar berputar bulat
halaman gambar polaroid putar
• (anda sekarang!)
Slider 3D Infinite

Tetapan Asas

Kebanyakan HTML dan CSS slider ini serupa dengan slider bulat yang kami buat kali terakhir. Malah, kami menggunakan penanda yang sama:

<code><div>
  <img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src="">
</div></code>

Ini adalah CSS asas, yang menetapkan bekas ibu bapa kami

sebagai grid, dan semua imej disusun di atas satu sama lain: .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>

Setakat ini, tidak ada yang rumit. Malah untuk imej gaya Polaroid, saya hanya menggunakan sempadan dan bayang-bayang. Anda mungkin dapat melakukan yang lebih baik, jadi jangan ragu untuk mencuba gaya hiasan ini! Kami akan meletakkan sebahagian besar tenaga kami ke dalam animasi, yang merupakan bahagian yang paling rumit.

apakah silap mata?

Logik slider ini bergantung pada urutan penyusunan imej - ya, kami akan menggunakan

. Semua imej bermula dengan nilai z-index yang sama (2), yang akan menjadikan imej terakhir dalam stack duduk di bahagian atas. z-index

Kami mengambil imej terakhir dan luncurkannya ke kanan sehingga imej seterusnya dalam timbunan dipaparkan. Kami kemudian menurunkan nilai

imej dan luncurkannya kembali ke dek. Oleh kerana nilai z-index lebih rendah daripada imej yang lain, ia menjadi imej terakhir dalam timbunan. z-index

Ini adalah demonstrasi mudah yang menunjukkan helah ini. Bergerak ke atas imej untuk mengaktifkan animasi:

Sekarang, bayangkan helah yang sama digunakan untuk semua imej. Jika kita menggunakan pemilih pseudo

untuk membezakan imej, maka ini adalah corak: :nth-child()

Kami meluncurkan imej terakhir (n). Imej seterusnya dapat dilihat (n - 1).
Kami meluncurkan imej seterusnya (n - 1). Imej seterusnya dapat dilihat (n - 2)
Kami meluncurkan imej seterusnya (n - 2). Imej seterusnya dapat dilihat (n - 3)
(kami meneruskan proses yang sama sehingga kami mencapai imej pertama)
Kami meluncurkan imej pertama (1). Imej terakhir (n) dapat dilihat lagi.

Ini adalah gelangsar tak terhingga kita!

Anatomi Animasi

Jika anda ingat jawatan terdahulu, saya hanya menentukan satu animasi dan kelewatan yang digunakan untuk mengawal setiap imej. Kami akan melakukan perkara yang sama di sini. Mari kita cuba menggambarkan garis masa animasi. Kami akan bermula dengan tiga imej dan menyamar sebagai imej nombor (n).

Animasi kami dibahagikan kepada tiga bahagian: "Swipe Right", "Swipe Kiri" dan "Jangan Bergerak". Kita boleh mengenal pasti kelewatan antara setiap imej. Jika kita fikir imej pertama bermula pada 0s dan tempohnya sama dengan 6s, maka imej kedua akan bermula pada -2s dan imej ketiga akan bermula pada -4s.

<code><div>
  <img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src="">
</div></code>

kita juga dapat melihat bahawa bahagian "bergerak" mengambil dua pertiga daripada keseluruhan animasi (2*100%/3), manakala bahagian "sapu kanan" dan "sapu kiri" bersama-sama mengambil satu pertiga-jadi setiap bahagian sama dengan 100%/6 dari jumlah animasi.

kita boleh menulis kerangka utama animasi seperti ini:

<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% adalah nilai sewenang -wenangnya. Saya memerlukan nilai lebih daripada 100%. Imej perlu meluncur ke arah yang lain dari seluruh imej. Untuk melakukan ini, ia perlu bergerak sekurang -kurangnya 100% saiznya. Itulah sebabnya saya memilih 120% - untuk mendapatkan ruang tambahan.

Sekarang kita perlu mempertimbangkan z-index. Jangan lupa, kita perlu mengemas kini imej selepas imej itu meluncur keluar dari timbunan dan sebelum meluncur kembali ke bahagian bawah timbunan. Daripada menentukan keadaan pada 16.67% (100%/6) mata pada garis masa, kita menentukan dua negeri pada hampir sama titik (16.66% dan 16.67%) di mana nilai diturunkan sebelum kita meluncurkan imej kembali ke dek. z-index

inilah yang berlaku apabila kita meletakkan semua ini bersama -sama:

<code>.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 6s / 3 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 6s / 3 */</code>

Nah, bahagian gelongsor nampaknya berfungsi dengan baik, tetapi perintah penyusunan semuanya kacau! Animasi bermula dengan baik kerana imej di bahagian atas bergerak ke belakang ... tetapi imej berikutnya tidak bersaing. Jika anda perasan, imej kedua dalam urutan kembali ke bahagian atas timbunan sebelum imej seterusnya berkelip ke bahagian atasnya. z-index

kita perlu menjejaki perubahan dalam

dengan teliti. Pada mulanya, semua imej mempunyai

: 2. Ini bermakna bahawa susunan susunan harus ...

kami meluncurkan imej ketiga dan mengemas kini z-index ke: z-index

<code>@keyframes slide {
  0%     { transform: translateX(0%); }
  16.67% { transform: translateX(120%); }
  33.34% { transform: translateX(0%); }
  100%   { transform: translateX(0%); } 
}</code>

kita melakukan perkara yang sama dengan imej kedua:

z-index

... dan imej pertama:

<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>

kami melakukan ini dan semuanya kelihatan baik -baik saja. Tetapi sebenarnya, ini tidak berlaku! Apabila imej pertama bergerak di belakang, imej ketiga memulakan lelaran lain, yang bermaksud ia kembali kepada

<code>我们的眼睛 ? --> 第三张 (2) | 第二张 (2) | 第一张 (2)</code>

: 2:

<code>我们的眼睛 ? --> 第二张 (2) | 第一张 (2) | 第三张 (1)</code>

Jadi, kita sebenarnya tidak mempunyai semua imej sama sekali: 2!

adalah 1 apabila imej tidak dipindahkan (iaitu bahagian "mudah alih" animasi). Jika kita meluncurkan imej ketiga dan mengemas kini nilai z-index dari 2 hingga 1, ia akan kekal di atas! Apabila semua imej mempunyai

yang sama, imej terakhir dalam urutan sumber -dalam kes ini imej ketiga kami terletak di bahagian atas timbunan. Meluncur imej ketiga akan menghasilkan hasil berikut:

<code>我们的眼睛 ? --> 第一张 (2) | 第三张 (1) | 第二张 (1)</code>

z-index Imej ketiga masih di bahagian atas, dan selepas itu, apabila animasinya dimulakan semula dengan z-index: 2, ​​kita menggerakkan imej kedua ke bahagian atas: z-index

<code><div>
  <img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src="">
</div></code>

Sebaik sahaja kita meluncur, kita dapat:

<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>

Imej pertama kemudian akan melompat ke atas:

<code>.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 6s / 3 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 6s / 3 */</code>

Baiklah, saya hilang. Jadi semua logik salah?

Saya tahu, ia mengelirukan. Tetapi logik kami tidak salah. Kami hanya perlu membetulkan animasi sedikit untuk membuat segala -galanya berfungsi dengan cara yang kami mahukan. Caranya adalah untuk menetapkan semula z-index dengan betul.

mari kita pertimbangkan kes di mana imej ketiga berada di atas:

<code>@keyframes slide {
  0%     { transform: translateX(0%); }
  16.67% { transform: translateX(120%); }
  33.34% { transform: translateX(0%); }
  100%   { transform: translateX(0%); } 
}</code>

kita lihat meluncur imej ketiga dan mengubahnya z-index akan menyimpannya di atas. Apa yang perlu kita lakukan ialah mengemas kini imej kedua z-index. Jadi, sebelum kita meluncurkan imej ketiga dari dek, kita mengemas kini imej kedua z-index hingga 2.

Dengan kata lain, kami menetapkan semula z-index imej kedua sebelum animasi berakhir.

tanda tambah hijau bermakna peningkatan z-index hingga 2, dan tanda minus merah berkaitan dengan z-index: 1. Imej kedua bermula dengan z-index: 2 Dan kemudian apabila ia meluncur keluar dari dek, kami mengemas kini ke 1. Tetapi sebelum imej pertama meluncur keluar dari dek, kita menukar z-index imej kedua kembali ke 2. Ini akan memastikan bahawa kedua -dua imej mempunyai z-index yang sama, bagaimanapun, imej ketiga masih akan berada di atas kerana ia muncul kemudian di DOM. Tetapi selepas imej ketiga slaid dan mengemas kini z-index, ia bergerak ke bahagian bawah.

Ini adalah dua pertiga daripada animasi, jadi mari kita mengemas kini kerangka utama dengan sewajarnya:

<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>

Ia sedikit lebih baik, tetapi masih tidak cukup baik. Ada soalan lain ...

oh tidak, ini tidak akan berakhir!

Jangan risau, kita tidak akan mengubah kerangka utama lagi, kerana masalah ini hanya berlaku apabila imej terakhir terlibat. Kita boleh membuat animasi utama "khas" untuk imej terakhir untuk menyelesaikan masalah ini.

Apabila imej pertama berada di atas, kita mempunyai situasi berikut:

<code>我们的眼睛 ? --> 第三张 (2) | 第二张 (2) | 第一张 (2)</code>

Memandangkan pelarasan yang kami buat sebelum imej pertama akan melompat ke bahagian atas. Ini hanya berlaku dalam kes ini kerana imej seterusnya yang bergerak selepas imej pertama adalah urutan yang lebih tinggi imej terakhir dalam DOM. Selebihnya imej adalah baik kerana kita mempunyai n, maka n - 1, maka kita pergi dari 3 hingga 2, dari 2 hingga 1 ... tetapi kemudian kita pergi dari 1 ke N.

Untuk mengelakkan ini, kami akan menggunakan kerangka utama berikut untuk imej terakhir:

<code>我们的眼睛 ? --> 第二张 (2) | 第一张 (2) | 第三张 (1)</code>

kami menetapkan semula nilai z-index apabila animasi pergi ke 5/6 (bukannya dua pertiga), dan imej pertama telah dipindahkan dari timbunan. Jadi kita tidak dapat melihat lompatan!

kejayaan! Slider Infinity kami kini sempurna! Ini semua mengenai kod akhir kami:

<code>我们的眼睛 ? --> 第一张 (2) | 第三张 (1) | 第二张 (1)</code>

menyokong bilangan imej

Sekarang animasi kami berfungsi untuk tiga imej, mari buatnya berfungsi untuk imej nombor (n). Tetapi pertama, kita dapat mengoptimumkan kerja kita sedikit dengan memisahkan animasi untuk mengelakkan redundansi:

<code><div>
  <img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src="">
</div></code>

Kod ini lebih mudah dibaca dan diselenggara! Kami membuat satu animasi untuk bahagian gelongsor dan animasi lain untuk kemas kini z-index. Sila ambil perhatian bahawa kami menggunakan z-index pada animasi steps(1). Ini kerana saya mahu menukar nilai z-index secara tiba -tiba, tidak seperti animasi slaid, di mana kita mahu bergerak lancar.

Sekarang kod lebih mudah dibaca dan diselenggara, kita dapat lebih memahami bagaimana untuk menyokong bilangan imej. Apa yang perlu kita lakukan ialah mengemas kini peratusan kelewatan animasi dan kerangka utama. Kelewatan adalah mudah kerana kami dapat menyokong pelbagai imej dalam gelangsar bulat menggunakan gelung yang sama yang kami buat dalam jawatan sebelumnya:

<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>

Ini bermakna kita bergerak dari CSS biasa ke SASS. Seterusnya, kita perlu membayangkan bagaimana garis masa berubah dengan imej N. Jangan lupa bahawa animasi dibahagikan kepada tiga peringkat:

Selepas "sapu kanan" dan "leret kiri", imej itu harus tetap tidak tercemar sehingga seluruh imej melengkapkan urutan. Oleh itu, bahagian "langsung" mengambil masa yang sama seperti (n - 1) sebagai "sapu kanan" dan "sapu kiri". Dalam satu lelaran, imej N akan meluncur. Oleh itu, kedua -dua sapu kanan dan sapu kiri akaun untuk 100%/n dari jumlah garis masa animasi. Kedua -dua sapu kanan dan sapu kiri akaun untuk 100%/n dari jumlah garis masa animasi. Imej slaid keluar dari timbunan pada (100%/n)/2 dan slaid kembali pada 100%/n.

kita boleh mengubahnya:

<code>.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 6s / 3 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 6s / 3 */</code>

... hingga ke tahap ini:

<code>@keyframes slide {
  0%     { transform: translateX(0%); }
  16.67% { transform: translateX(120%); }
  33.34% { transform: translateX(0%); }
  100%   { transform: translateX(0%); } 
}</code>

Jika kita menggantikan N dengan 3, apabila terdapat 3 imej dalam timbunan, kita akan mendapat 16.67% dan 33.33%. Logik susunan susunan adalah sama, kita akan mempunyai:

<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>

kita masih perlu mengemas kini titik 66.33%. Ini harus di mana imej itu menetapkan semula z-index sebelum animasi berakhir. Sementara itu, imej seterusnya mula meluncur. Oleh kerana bahagian gelongsor memerlukan 100%/n, tetapan semula harus berlaku pada 100% - 100%/n:

<code>我们的眼睛 ? --> 第三张 (2) | 第二张 (2) | 第一张 (2)</code>

Tetapi untuk animasi z-order-last kami berfungsi, ia sepatutnya berlaku kemudian dalam urutan. Ingat pembetulan yang kami buat pada gambar terakhir? Menetapkan semula nilai z-index perlu berlaku apabila imej pertama dipindahkan dari timbunan, bukan apabila ia mula meluncur. Kita boleh menggunakan alasan yang sama dalam kerangka utama:

<code>我们的眼睛 ? --> 第二张 (2) | 第一张 (2) | 第三张 (1)</code>

Kami sudah selesai! Berikut adalah hasil yang diperoleh apabila menggunakan lima imej:

kita boleh menambah sedikit putaran untuk membuat perkara kelihatan lebih cantik:

semua yang saya lakukan adalah tambahan rotate(var(--r)) ke atribut transform. Dalam gelung, --r mentakrifkan menggunakan sudut rawak:

<code>我们的眼睛 ? --> 第一张 (2) | 第三张 (1) | 第二张 (1)</code>

Putaran boleh mencipta kegagalan kecil, kerana kadang -kadang kita dapat melihat beberapa imej melompat di belakang timbunan, tetapi itu tidak penting.

Ringkasan

Semua ini z-index kerja adalah tindakan mengimbangi yang besar, bukan? Jika anda tidak pasti bagaimana pesanan penyusunan berfungsi sebelum latihan ini, kini anda mungkin mempunyai pemahaman yang lebih baik! Jika anda mendapati beberapa penjelasan yang sukar difahami, saya sangat mengesyorkan membaca artikel ini sekali lagi dan menarik kandungan dengan pensil dan kertas. Cuba gunakan bilangan imej yang berbeza untuk menggambarkan setiap langkah animasi untuk lebih memahami teknik ini.

Kali terakhir, kami menggunakan beberapa helah geometri untuk membuat slider bulat yang berputar kembali ke imej pertama selepas menyelesaikan urutan lengkap. Kali ini, kami menggunakan z-index untuk menyelesaikan teknik yang sama. Dalam kedua -dua kes, kami tidak menyalin sebarang imej untuk mensimulasikan animasi yang berterusan, dan tidak menggunakan JavaScript untuk membantu pengiraan.

Seterusnya, kami akan membuat slider 3D. Tinggal!

Atas ialah kandungan terperinci Slider tak terhingga CSS membalikkan imej polaroid. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!