Penggeser Gambar Berputar Tak Terbatas dan Berputar CSS

Penggeser gambar (juga disebut komidi putar) ada di mana-mana. Ada banyak trik CSS untuk membuat slider umum di mana gambar meluncur dari kiri ke kanan (atau sebaliknya). Itu kesepakatan yang sama dengan banyak pustaka JavaScript di luar sana yang membuat slider mewah dengan animasi yang rumit. Kami tidak akan melakukan semua itu di posting ini.

Melalui serangkaian artikel kecil, kita akan menjelajahi beberapa penggeser khusus CSS yang mewah dan tidak biasa. Jika Anda lelah melihat slider klasik yang sama, maka Anda berada di tempat yang tepat!

Untuk artikel pertama ini, kita akan mulai dengan sesuatu yang saya sebut "penggeser gambar berputar melingkar":

Keren kan? mari kita membedah kodenya!

Markup HTML

Jika Anda mengikuti seri saya dekorasi gambar mewah or Kotak CSS dan bentuk khusus, maka Anda tahu bahwa aturan pertama saya adalah bekerja dengan HTML sekecil mungkin. Saya selalu berusaha keras untuk menemukan solusi CSS sebelum mengacaukan banyak kode saya

s dan hal-hal lain.

Aturan yang sama berlaku di sini — kode kita hanyalah daftar gambar dalam wadah.

Katakanlah kita bekerja dengan empat gambar:

Itu dia! Sekarang mari beralih ke bagian kode yang menarik. Tapi pertama-tama, kita akan menyelami ini untuk memahami logika cara kerja slider kita.

Bagaimana cara kerjanya?

Berikut adalah video di mana saya menghapus overflow: hidden dari CSS sehingga kita dapat lebih memahami bagaimana gambar bergerak:

Sepertinya keempat gambar kita ditempatkan pada lingkaran besar yang berputar berlawanan arah jarum jam.

Semua gambar memiliki ukuran yang sama (dilambangkan dengan S dalam gambar). Perhatikan lingkaran biru yang merupakan lingkaran yang bersinggungan dengan pusat semua gambar dan memiliki radius (R). Kita akan membutuhkan nilai ini nanti untuk animasi kita. R adalah sama dengan 0.707 * S. (Saya akan melewatkan geometri yang memberi kita persamaan itu.)

Mari kita menulis beberapa CSS!

Kami akan menggunakan Kotak CSS untuk menempatkan semua gambar di area yang sama di atas satu sama lain:

.gallery  {
  --s: 280px; /* control the size */

  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  padding: calc(var(--s) / 20); /* we will see the utility of this later */
  border-radius: 50%;
}
.gallery > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

Tidak ada yang terlalu rumit sejauh ini. Bagian yang sulit adalah animasinya.

Kami berbicara tentang memutar lingkaran besar, tetapi pada kenyataannya, kami akan memutar setiap gambar satu per satu untuk menciptakan ilusi lingkaran besar yang berputar. Jadi, mari kita definisikan animasi, m, dan menerapkannya ke elemen gambar:

.gallery > img {
  /* same as before */
  animation: m 8s infinite linear;
  transform-origin: 50% 120.7%;
}

@keyframes m {
  100% { transform: rotate(-360deg); }
}

Trik utama bergantung pada garis yang disorot itu. Secara default, CSS transform-origin properti sama dengan center (Atau 50% 50%) yang membuat gambar berputar di sekitar pusatnya, tetapi kita tidak memerlukannya untuk melakukan itu. Kami membutuhkan gambar untuk berputar di sekitar pusat lingkaran besar yang berisi gambar kami maka nilai baru untuk transform-origin.

Karena R sama dengan 0.707 * S, kita dapat mengatakan bahwa R adalah sama dengan 70.7% dari ukuran gambar. Berikut adalah gambar untuk mengilustrasikan bagaimana kami mendapatkan 120.7% nilai:

Mari jalankan animasinya dan lihat apa yang terjadi:

Saya tahu saya tahu. Hasilnya jauh dari yang kita inginkan, tapi kenyataannya kita sangat dekat. Sepertinya hanya ada satu gambar di sana, tetapi jangan lupa bahwa kita telah menumpuk semua gambar di atas satu sama lain. Semuanya berputar pada saat yang sama dan hanya gambar teratas yang terlihat. Yang kita butuhkan adalah menunda animasi setiap gambar untuk menghindari tumpang tindih ini.

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

Segalanya sudah menjadi lebih baik!

Jika kita menyembunyikan luapan pada penampung, kita sudah dapat melihat penggeser, tetapi kita akan sedikit memperbarui animasinya sehingga setiap gambar tetap terlihat untuk waktu yang singkat sebelum bergerak.

Kami akan memperbarui keyframes animasi kami untuk melakukan hal itu:

@keyframes m {
  0%, 3% { transform: rotate(0); }
  22%, 27% { transform: rotate(-90deg); }
  47%, 52% { transform: rotate(-180deg); }
  72%, 77% { transform: rotate(-270deg); }
  98%, 100% { transform: rotate(-360deg); }
}

Untuk setiap 90deg (360deg/4, Di mana 4 adalah jumlah gambar) kami akan menambahkan jeda kecil. Setiap gambar akan tetap terlihat selama 5% durasi keseluruhan sebelum kita meluncur ke yang berikutnya (27%-22%, 52%-47%, dll.). Aku akan memperbarui animation-timing-function menggunakan cubic-bezier() berfungsi untuk membuat animasi sedikit lebih menarik:

Sekarang penggeser kami sempurna! Yah, hampir sempurna karena kita masih kehilangan sentuhan akhir: batas lingkaran warna-warni yang berputar di sekitar gambar kita. Kita bisa menggunakan pseudo-element pada .gallery pembungkus untuk membuatnya:

.gallery {
  padding: calc(var(--s) / 20); /* the padding is needed here */
  position: relative;
}
.gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: inherit; /* Inherits the same padding */
  border-radius: 50%;
  background: repeating-conic-gradient(#789048 0 30deg, #DFBA69 0 60deg);
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.gallery::after,
.gallery >img {
  animation: m 8s infinite cubic-bezier(.5, -0.2, .5, 1.2);
}

Saya telah membuat lingkaran dengan a gradien kerucut berulang untuk latar belakang saat menggunakan a trik penyamaran yang hanya menunjukkan area empuk. Kemudian saya menerapkan animasi yang sama dengan yang kami tentukan untuk gambar.

Kita sudah selesai! Kami memiliki penggeser melingkar yang keren:

Mari tambahkan lebih banyak gambar

Bekerja dengan empat gambar itu bagus, tetapi akan lebih baik jika kita dapat menskalakannya ke sejumlah gambar. Bagaimanapun, ini adalah tujuan dari penggeser gambar. Kita harus bisa mempertimbangkan N gambar-gambar.

Untuk ini, kita akan membuat kode lebih umum dengan memperkenalkan Sass. Pertama, kita mendefinisikan variabel untuk jumlah gambar ($n) dan kami akan memperbarui setiap bagian di mana kami meng-hard-code jumlah gambar (4).

Mari kita mulai dengan penundaan:

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

Rumus penundaan adalah (1 - $i)*duration/$n, yang memberi kita lingkaran Sass berikut:

@for $i from 2 to ($n + 1) {
  .gallery > img:nth-child(#{$i}) {
    animation-delay: calc(#{(1 - $i) / $n} * 8s);
  }
}

Kita juga bisa menjadikan durasi sebagai variabel jika kita benar-benar menginginkannya. Tapi mari beralih ke animasi:

@keyframes m {
  0%, 3% { transform: rotate(0); }
  22%, 27% { transform: rotate(-90deg); }
  47%, 52% { transform: rotate(-180deg); }
  72%, 77% { transform: rotate(-270deg); }
  98%, 100% {transform: rotate(-360deg); }
}

Mari sederhanakan untuk mendapatkan tampilan pola yang lebih baik:

@keyframes m {
  0% { transform: rotate(0); }
  25% { transform: rotate(-90deg); }
  50% { transform: rotate(-180deg); }
  75% { transform: rotate(-270deg); }
  100% { transform: rotate(-360deg); }
}

Langkah antara setiap negara sama dengan 25% - yang mana 100%/4 - dan kami menambahkan a -90deg sudut — yaitu -360deg/4. Itu berarti kita bisa menulis loop kita seperti ini:

@keyframes m {
  0% { transform: rotate(0); }
  @for $i from 1 to $n {
    #{($i / $n) * 100}% { transform: rotate(#{($i / $n) * -360}deg); }  
  }
  100% { transform: rotate(-360deg); }
}

Karena setiap gambar mengambil 5% animasi, kami mengubah ini:

#{($i / $n) * 100}%

…dengan ini:

#{($i / $n) * 100 - 2}%, #{($i / $n) * 100 + 3}%

Perlu dicatat bahwa 5% adalah nilai arbitrer yang saya pilih untuk contoh ini. Kami juga dapat menjadikannya variabel untuk mengontrol berapa lama setiap gambar harus tetap terlihat. Saya akan melewatkannya demi kesederhanaan, tetapi untuk pekerjaan rumah, Anda dapat mencoba melakukannya dan membagikan implementasi Anda di komentar!

@keyframes m {
  0%,3% { transform: rotate(0); }
  @for $i from 1 to $n {
    #{($i / $n) * 100 - 2}%, #{($i / $n) * 100 + 3}% { transform: rotate(#{($i / $n) * -360}deg); }  
  }
  98%,100% { transform: rotate(-360deg); }
}

Bit terakhir adalah memperbarui transform-origin. Kami membutuhkan beberapa trik geometri. Berapa pun jumlah gambarnya, konfigurasinya selalu sama. Kami menempatkan gambar kami (lingkaran kecil) di dalam lingkaran besar dan kami perlu menemukan nilai jari-jarinya, R.

Anda mungkin tidak menginginkan penjelasan geometri yang membosankan, jadi inilah cara kami menemukannya R:

R = S / (2 * sin(180deg / N))

Jika kita menyatakannya sebagai persentase, itu memberi kita:

R = 100% / (2 * sin(180deg / N)) = 50% / sin(180deg / N)

… yang berarti transform-origin nilainya sama dengan:

transform-origin: 50% (50% / math.sin(180deg / $n) + 50%);

Dilakukan! Kami memiliki penggeser yang berfungsi dengan gambar nomor apa pun!

Mari lemparkan sembilan gambar ke sana:

Tambahkan gambar sebanyak yang Anda inginkan dan perbarui $n variabel dengan jumlah total gambar.

Membungkus

Dengan beberapa trik menggunakan transformasi CSS dan geometri standar, kami membuat penggeser melingkar yang bagus yang tidak memerlukan banyak kode. Yang keren dari slider ini adalah kita tidak perlu repot menggandakan gambar untuk menjaga animasi tanpa batas karena kita memiliki lingkaran. Setelah putaran penuh, kita akan kembali ke gambar pertama!