CSS Infinite in krožni vrtljivi drsnik za slike

Drsniki za slike (imenovani tudi vrtiljaki) so povsod. obstajajo veliko trikov CSS za ustvarjanje skupnega drsnika kjer slike drsijo od leve proti desni (ali nasprotno). To je enak dogovor z številne knjižnice JavaScript ki ustvarjajo modne drsnike s kompleksnimi animacijami. V tej objavi ne bomo storili ničesar od tega.

Skozi majhno serijo člankov bomo raziskali nekaj modnih in nenavadnih drsnikov, ki uporabljajo samo CSS. Če ste utrujeni od gledanja istih starih klasičnih drsnikov, potem ste na pravem mestu!

Za ta prvi članek bomo začeli z nečim, kar imenujem "krožni vrtljivi drsnik slike":

Kul kajne? razčlenimo kodo!

Oznaka HTML

Če ste spremljali mojo serijo modni slikovni okraski or Mreža CSS in oblike po meri, potem veste, da je moje prvo pravilo delo z najmanjšim možnim HTML. Vedno se zelo trudim najti rešitve CSS, preden svojo kodo napolnim z veliko

s in druge stvari.

Tu velja isto pravilo – naša koda ni nič drugega kot seznam slik v vsebniku.

Recimo, da delamo s štirimi slikami:

To je to! Zdaj pa preidimo na zanimiv del kode. Toda najprej se bomo poglobili v to, da bomo razumeli logiko delovanja našega drsnika.

Kako deluje?

Tukaj je video, kjer odstranim overflow: hidden iz CSS, da lahko bolje razumemo, kako se slike premikajo:

Kot da so naše štiri slike postavljene na velik krog, ki se vrti v nasprotni smeri urinega kazalca.

Vse slike so enake velikosti (označeno z S na sliki). Bodite pozorni na modri krog, ki je krog, ki seka središče vseh slik in ima polmer (R). To vrednost bomo potrebovali pozneje za našo animacijo. R je enako 0.707 * S. (Geometrijo, ki nam daje to enačbo, bom preskočil.)

Napišimo nekaj CSS!

Uporabljali bomo Mreža CSS če želite vse slike postaviti na isto območje eno nad drugo:

.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;
}

Zaenkrat nič preveč zapletenega. Težaven del je animacija.

Govorili smo o vrtenju velikega kroga, v resnici pa bomo vrteli vsako sliko posebej in tako ustvarili iluzijo velikega vrtečega se kroga. Torej, definirajmo animacijo, min ga uporabite za elemente slike:

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

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

Glavni trik se opira na to označeno črto. Privzeto je CSS transform-origin lastnina je enaka center (ali 50% 50%), zaradi česar se slika vrti okoli središča, vendar je za to ne potrebujemo. Potrebujemo, da se slika vrti okoli središča velik krog ki vsebuje naše slike, torej novo vrednost za transform-origin.

Ker je R enako 0.707 * S, to lahko rečemo R je enako 70.7% velikosti slike. Tukaj je slika, ki ponazarja, kako smo dobili 120.7% vrednost:

Zaženimo animacijo in poglejmo, kaj se zgodi:

Vem, vem. Rezultat je daleč od tega, kar si želimo, v resnici pa smo zelo blizu. Morda se zdi, da je samo ena slika, vendar ne pozabite, da smo vse slike zložili eno na drugo. Vsi se vrtijo hkrati in vidna je samo zgornja slika. Potrebujemo zakasnitev animacije vsake slike, da se izognemo temu prekrivanju.

.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 */

Stvari se že izboljšujejo!

Če skrijemo preliv na vsebniku, lahko že vidimo drsnik, vendar bomo animacijo nekoliko posodobili, tako da bo vsaka slika ostala vidna kratek čas, preden se premakne.

Posodobili bomo naše ključne sličice animacije, da bodo naredili prav to:

@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); }
}

Za vsak 90deg (360deg/4, Kjer 4 je število slik) bomo dodali majhen premor. Vsaka slika bo ostala vidna za 5% celotnega trajanja, preden zdrsnemo na naslednjega (27%-22%, 52%-47%itd.). Posodobil bom animation-timing-function z uporabo cubic-bezier() funkcija, ki naredi animacijo nekoliko bolj domiselno:

Zdaj je naš drsnik popoln! No, skoraj popolno, ker nam še vedno manjka zadnja poteza: barvita krožna obroba, ki se vrti okoli naših slik. Lahko uporabimo psevdoelement na .gallery ovoj za izdelavo:

.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);
}

Ustvaril sem krog z a ponavljajoči se konični gradient za ozadje med uporabo a maskirni trik ki prikazuje samo oblazinjeno območje. Nato nanj uporabim isto animacijo, kot smo jo določili za slike.

Končali smo! Imamo kul krožni drsnik:

Dodajmo več slik

Delo s štirimi slikami je dobro, vendar bi bilo bolje, če bi ga lahko prilagodili poljubnemu številu slik. Navsezadnje je to namen slikovnega drsnika. Morali bi biti sposobni razmisliti N slik.

Za to bomo kodo naredili bolj splošno z uvedbo Sass. Najprej definiramo spremenljivko za število slik ($n) in posodobili bomo vsak del, kjer smo trdo kodirali število slik (4).

Začnimo z zamudami:

.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 */

Formula za zamudo je (1 - $i)*duration/$n, kar nam daje naslednjo zanko Sass:

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

Trajanje lahko spremenimo tudi kot spremenljivko, če res želimo. A pojdimo k animaciji:

@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); }
}

Poenostavimo ga, da bomo bolje videli vzorec:

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

Korak med vsakim stanjem je enak 25% - kateri je 100%/4 — in dodamo a -90deg kot — kar je -360deg/4. To pomeni, da lahko zanko zapišemo takole:

@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); }
}

Ker vsaka slika traja 5% animacije spremenimo tole:

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

…s tem:

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

Treba je opozoriti, da 5% je poljubna vrednost, ki sem jo izbral za ta primer. Prav tako lahko naredimo spremenljivko za nadzor, koliko časa mora posamezna slika ostati vidna. Zaradi enostavnosti bom to preskočil, toda za domačo nalogo lahko poskusite to narediti in svojo izvedbo delite v komentarjih!

@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); }
}

Zadnja stvar je posodobitev transform-origin. Potrebovali bomo nekaj geometrijskih trikov. Ne glede na število slik je konfiguracija vedno enaka. Naše slike (majhne kroge) imamo znotraj velikega kroga in moramo najti vrednost polmera, R.

Verjetno ne želite dolgočasne razlage geometrije, zato jo najdemo tukaj R:

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

Če to izrazimo v odstotkih, dobimo:

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

... kar pomeni transform-origin vrednost je enaka:

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

Končali smo! Imamo drsnik, ki deluje s poljubnimi številskimi slikami!

Vanj vrzimo devet slik:

Dodajte poljubno število slik in posodobite $n spremenljivka s skupnim številom slik.

Zavijanje

Z nekaj triki, ki uporabljajo transformacije CSS in standardno geometrijo, smo ustvarili prijeten krožni drsnik, ki ne zahteva veliko kode. Kar je kul pri tem drsniku, je, da se nam ni treba truditi s podvajanjem slik, da bi ohranili neskončno animacijo, saj imamo krog. Po popolni rotaciji se bomo vrnili na prvo sliko!