CSS-i lõputu ja ringikujuline pöörlev pildiliugur

Pildiliugurid (nimetatakse ka karussellideks) on kõikjal. Seal on palju CSS-i nippe ühise liuguri loomiseks kus pildid libisevad vasakult paremale (või vastupidi). See on sama tehing palju JavaScripti teeke mis loovad keerukate animatsioonidega uhkeid liugureid. Me ei kavatse selles postituses midagi ette võtta.

Väikese artiklite seeria kaudu uurime mõningaid väljamõeldud ja ebatavalisi ainult CSS-i liugureid. Kui olete väsinud samade vanade klassikaliste liugurite nägemisest, siis olete õiges kohas!

Selle esimese artikli puhul alustame millegagi, mida ma nimetan "ringikujuliseks pöörlevaks pildi liuguriks":

Lahe eks? lahkame koodi!

HTML-i märgistus

Kui jälgisite minu sarja uhked pildikaunistused or CSS-võrk ja kohandatud kujundid, siis teate, et minu esimene reegel on töötada võimalikult väikese HTML-iga. Püüan alati CSS-i lahendusi leida, enne kui oma koodi palju risustan

s ja muud asjad.

Siin kehtib sama reegel – meie kood pole muud kui konteineris olevate piltide loend.

Oletame, et töötame nelja pildiga:

See on kõik! Liigume nüüd koodi huvitava osa juurde. Kuid kõigepealt sukeldume sellesse, et mõista meie liuguri toimimise loogikat.

Kuidas see toimib?

Siin on video, kust ma eemaldan overflow: hidden CSS-ist, et saaksime paremini aru saada, kuidas pildid liiguvad:

See on nagu meie neli pilti asetatud suurele ringile, mis pöörleb vastupäeva.

Kõik pildid on sama suurusega (tähistatud S joonisel). Pange tähele sinist ringi, mis on ring, mis lõikub kõigi piltide keskpunktiga ja millel on raadius (R). Vajame seda väärtust hiljem oma animatsiooni jaoks. R on võrdne 0.707 * S. (Ma jätan vahele geomeetria, mis annab meile selle võrrandi.)

Kirjutame veidi CSS-i!

Me kasutame CSS -võrk et asetada kõik pildid üksteise kohale samale alale:

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

Seni pole midagi liiga keerulist. Keeruline osa on animatsioon.

Rääkisime suure ringi pööramisest, kuid tegelikult pöörame iga pilti eraldi, luues illusiooni suurest pöörlevast ringist. Niisiis, määratleme animatsiooni, mja rakendage seda pildielementidele:

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

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

Peamine trikk tugineb sellele esiletõstetud joonele. Vaikimisi CSS transform-origin vara on võrdne center (Või 50% 50%), mis paneb pildi oma keskpunkti ümber pöörlema, kuid me ei vaja seda selleks. Peame kujutist pöörama ümber keskpunkti suur ring mis sisaldab meie pilte, seega uus väärtus transform-origin.

Kuna R on võrdne 0.707 * S, võime seda öelda R on võrdne 70.7% pildi suurusest. Siin on joonis, mis illustreerib, kuidas me selle saime 120.7% väärtus:

Käivitame animatsiooni ja vaatame, mis juhtub:

Ma tean, ma tean. Tulemus on kaugel sellest, mida me tahame, kuid tegelikult oleme väga lähedal. Võib tunduda, et seal on ainult üks pilt, kuid ärge unustage, et oleme kõik pildid üksteise peale virna pannud. Kõik need pöörlevad korraga ja näha on ainult ülemine pilt. Selle kattumise vältimiseks peame iga pildi animatsiooni edasi lükkama.

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

Asi läheb juba paremaks!

Kui peitame konteineri ületäitumise, näeme juba liugurit, kuid värskendame animatsiooni veidi, et iga pilt jääks lühikeseks ajaks nähtavaks, enne kui see edasi liigub.

Värskendame oma animatsiooni võtmekaadreid, et seda teha:

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

Iga 90deg (360deg/4, Kus 4 on piltide arv) lisame väikese pausi. Iga pilt jääb nähtavaks 5% kogu kestusest, enne kui libiseme järgmise juurde (27%-22%, 52%-47%, jne.). Ma kavatsen värskendada animation-timing-function kasutades cubic-bezier() funktsioon, mis muudab animatsiooni pisut põnevamaks:

Nüüd on meie liugur täiuslik! Noh, peaaegu täiuslik, sest meil on ikka veel puudu viimane lihv: värviline ringikujuline ääris, mis meie piltide ümber pöörleb. Me saame kasutada pseudoelementi .gallery ümbris selle valmistamiseks:

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

Olen loonud ringi a koonuse gradiendi kordamine tausta jaoks, kasutades a maskeerimistrikk mis näitab ainult polsterdatud ala. Seejärel rakendan sellele sama animatsiooni, mille me piltide jaoks määratlesime.

Me saime valmis! Meil on lahe ringikujuline liugur:

Lisame veel pilte

Nelja pildiga töötamine on hea, kuid parem oleks, kui saaksime seda skaleerida suvalise arvu piltideni. Lõppude lõpuks on see pildi liuguri eesmärk. Peaksime suutma kaaluda N pilte.

Selleks muudame koodi üldisemaks, tutvustades Sassi. Esiteks määratleme muutuja piltide arvu jaoks ($n) ja värskendame iga osa, kus piltide arvu kõvasti kodeerisime (4).

Alustame viivitustest:

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

Viivituse valem on (1 - $i)*duration/$n, mis annab meile järgmise Sassi tsükli:

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

Kui me tõesti tahame, saame muuta ka kestuse muutujaks. Aga liigume edasi animatsiooni juurde:

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

Lihtsustame seda, et mustrist paremini näha:

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

Iga oleku vaheline samm on võrdne 25% - mis on 100%/4 - ja lisame a -90deg nurk — mis on -360deg/4. See tähendab, et võime selle asemel kirjutada oma tsükli järgmiselt:

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

Kuna iga pilt võtab 5% animatsioonis muudame seda:

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

…sellega:

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

Tuleb märkida, et 5% on suvaline väärtus, mille ma selle näite jaoks valin. Samuti saame selle muuta muutujaks, mis määrab, kui kaua iga pilt peaks nähtavaks jääma. Ma jätan selle lihtsuse huvides vahele, kuid kodutöö jaoks võite proovida seda teha ja jagada oma teostust kommentaarides!

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

Viimane osa on värskendamine transform-origin. Vajame mõningaid geomeetria nippe. Olenemata piltide arvust on konfiguratsioon alati sama. Meie pildid (väikesed ringid) on paigutatud suure ringi sisse ja me peame leidma raadiuse väärtuse, R.

Tõenäoliselt ei taha te igavat geomeetria selgitust, nii et leiame selle järgmiselt R:

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

Kui väljendame seda protsentides, saame:

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

… mis tähendab transform-origin väärtus on võrdne:

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

Oleme valmis! Meil on liugur, mis töötab mis tahes arvu piltidega!

Viskame sinna üheksa pilti:

Lisage nii palju pilte kui soovite ja värskendage $n muutuv piltide koguarvuga.

Pakke kuni

Mõne nipiga, kasutades CSS-teisendusi ja standardset geomeetriat, lõime kena ringikujulise liuguri, mis ei vaja palju koodi. Selle liuguri puhul on lahe see, et lõpmatu animatsiooni säilitamiseks ei pea me nägema vaeva piltide dubleerimisega, kuna meil on ring. Pärast täielikku pööramist jõuame tagasi esimese pildi juurde!