Ideea aici este de a crea aspectul unei prezentări de diapozitive fără carusel. Cu alte cuvinte, realizăm o serie de imagini, diapozitivul de la stânga la dreapta și se repetă odată ajuns la sfârșitul imaginilor. Trucul este că folosim o singură imagine de fundal cu animații CSS pentru (...)
Ideea aici este de a crea aspectul unei prezentări de diapozitive fără carusel. Cu alte cuvinte, realizăm o serie de imagini, diapozitivul de la stânga la dreapta și se repetă odată ajuns la sfârșitul imaginilor.
Trucul este că folosim o singură imagine de fundal cu animații CSS pentru a o muta pe ecran și a repeta când este terminată. Acest lucru creează iluzia unei galerii de imagini atunci când folosim cu adevărat o singură imagine.
Configurarea codului HTML
Iată un plan pentru modul în care trebuie structurat codul nostru HTML:
Există două elemente cu care lucrăm: cel pe care îl apelăm .containercare se potrivește cu lățimea exactă a ferestrei de vizualizare și altul pe care îl apelăm, .sliding-backgroundcare se află în spatele .containerși îl revarsă. În esență, folosim .containermasca ca mască pentru a ascunde lățimea totală a acesteia pe .sliding-backgroundmăsură ce se derulează pe ecran.
Asta înseamnă că trebuie să creăm doar două elemente în marcajul HTML:
Poziționarea elementelor
Să mergem mai departe și să adăugăm câteva CSS care vor poziționa corect cele două elemente ale noastre.
.container ( overflow: hidden; ) .sliding-background ( height: 500px; width: 5076px; )Noastre .containerutilizează overflowproprietate care va ascunde nimic din ce este conținut vizual în afara acesteia. Gândiți-vă la asta ca la o recoltă pe o fotografie. Pot exista lucruri suplimentare în afara containerului, dar containerul ne împiedică să îl vedem.
Aici .sliding-backgroundintervine jocul nostru . Este setat la o lățime ridicolă care ar revărsa majoritatea vizualizărilor. Și acesta este trucul: ar trebui să fie ceva care ar revărsa containerul. În acest caz, folosim o 5076pxlățime oarecum aleasă în mod arbitrar, care ar trebui să depășească majoritatea vizualizărilor browserului.
Crearea imaginii de fundal
Avem nevoie de o imagine dacă creăm iluzia unei galerii de prezentare, nu? Acesta este următorul nostru ordin de lucru.
Vă amintiți cum am menționat că 5076pxlățimea oarecum aleasă în mod arbitrar pentru fundalul glisant? Ei bine, este arbitrar, dar intenționat, în sensul că este frumos divizibil cu 3, care se încadrează în calendarul unei bucle de un minut, care va apărea puțin mai târziu. Asta înseamnă că pânza pentru imaginea de fundal este 5076 / 3sau 1692px. În cele din urmă, fundalul nostru se va repeta în total de trei ori într-un minut într-o buclă infinită. Matematică pentru câștig!
500pxÎnălțimea este cu adevărat arbitrară. Aceasta poate fi orice doriți și atât timp cât este și dimensiunea reală a fișierului de imagine de fundal.
Fișierul Photoshop utilizat pentru a crea imaginea de fundal pentru demonstrația de la începutul acestui capitol este disponibil pentru descărcare dacă doriți un punct de plecare.
Odată ce imaginea a fost salvată (și optimizată!), Aceasta este ceea ce vom folosi ca imagine de fundal în CSS:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 500px; width: 5076px; /* The image width times 3 */ )Grozav! Aceasta ne oferă imaginea minunată care revarsă containerul și poate fi utilizată acum pentru a derula ecranul la infinit.
Animarea fundalului
Bine, să facem acest lucru să se miște. Vrem să meargă de la stânga la dreapta într-o buclă care se repetă din nou și din nou pentru a crea un efect continuu pe care imaginea îl continuă pentru totdeauna.
Mai întâi, să definim animația CSS:
@keyframes .slide ( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); /* The image width */ ) )Folosim transformproprietatea pentru a poziționa imaginea din stânga la marginea din stânga a containerului când începe animația, astfel:
Până la finalizarea animației, va fi transformat poziția negativ (de la stânga la dreapta) cu o sumă care se potrivește cu lățimea exactă a imaginii noastre. Și, deoarece .sliding-backgroundeste de trei ori lățimea imaginii reale, imaginea se repetă de trei ori între 0% și 100% înainte de a se repeta în buclă.
Notă: motivul pentru care folosim un suplimentar
background-positionpe principal transformpentru a face mișcarea, care este mult mai performantă.
OK, să completăm lucrurile apelând slideanimația noastră la .sliding-backgroundcurs:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; )animationProprietatea instruiește .sliding-backgroundsă folosească slideanimație și pentru a rula timp de un minut , la un moment dat într - un liniar, buclă infinită.
Punând totul împreună
.container ( overflow: hidden; ) .sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; ) @keyframes slide( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); ) )