Spriteovi slika su ovdje od 1970-ih. Koristili su se za prve računalne animacije na Atariju i drugim konzolama. Kako je vrijeme prolazilo, sve su ih manje upotrebljavali front-end programeri koji su željeli napredniju (čitaj: realnu) grafiku za 3D i virtualnu stvarnost.
Međutim, posljednjih godina vratili su se.
Sprite je termin računalne grafike za dvodimenzionalnu bitmapu koja je integrirana u veću scenu.
U posljednjih nekoliko godina Facebook, Twitter, Instagram i mnoge druge platforme društvenih mreža rasle su poput ludila. S rastom je došla njihova potreba za optimizacijom gdje god je to moguće i smanjenjem veličine zahtjeva poslužitelja. Tada su se CSS slikovni spitovi vratili u mainstream.
Za platformu poput Facebooka - koja ima više od milijardu korisnika - prikazivanje ikona, slika i sličnog sadržaja zahtijeva više zahtjeva poslužitelja. Zahtjevi nepotrebno preopterećuju promet.
Pa, što radite kako biste smanjili zahtjeve poslužitelja i propusnost? Okrenite se CSS-ovim spritovima.
Umjesto da zatražite sliku profila, sliku profila prijatelja, minijature albuma itd., Spritovi vam omogućuju upotrebu jedne slike, što znači samo jedan zahtjev. S tom slikom možete manipulirati tako da prikazuje te slike kao dijelove jedne veće slike.
Pogledajmo primjer koji uključuje zastave:
Sada da vidimo kako to funkcionira:
Kao što možete vidjeti u gornjem kodu, postavili smo bazu koja se sastoji od tri div-a, gdje će svaki div biti nositelj spritea.
Prvo smo odabrali div s ID-om prvog. Naš div će imati veličinu visine i širine koja će biti prikazana na našoj stranici. Kao pozadinu učitat ćemo sliku s URL-om („//i.postimg.cc/R0N7nkH9/flags.png") .
Sljedeća je stvar smanjiti / povećati našu pozadinsku sliku s veličinom pozadine: 1400px. (Možemo koristiti stvarnu veličinu piksela, postotak, em ili opciju.) Ovaj će nam parametar omogućiti "zumiranje" slike do točke na kojoj će se prikazivati samo određeni dio slike.
Na kraju, dva parameta koja dolaze nakon pozadine:
URL ("// i.postimg.cc/R0N7nkH9/flags.png"), premjestit će dio glavne slike, koji će biti vidljiv duž osi X i Y. Što znači da u ovom slučaju pozadina:
URL (“// i.postimg.cc/R0N7nkH9/flags.png") -86px -87px; prikazivat ćemo dio koji je odmaknut od vrha slike za 87 piksela od vrha i 86 piksela s lijeve strane .
Prvi broj ( -86px ) označava os X, gdje negativno znači pomicanje slijeva udesno, a pozitivno prelazak udesno ulijevo. Drugi brojevi (-87px) koriste se za pomak od vrha prema dnu, gdje se primjenjuju obrnuta pravila, pozitivan broj znači odozdo prema gore, a negativni, naravno, odozgo prema dolje.
Kao što možete vidjeti na originalnoj slici, zastava koju smo dobili (Bosna) doista je druga s vrha i druga s lijeve strane.
Dovoljno dobro? OK, nastavimo.
Sada napunimo div s ID-om sekunde. Primijenit će se ista pravila za postavljanje, a jedina promjena će biti ta što ćemo u ovom slučaju ostati na izvornoj osi X (0 piksela), a smjer Y ići će od donjeg dijela prema vrhu (89 piksela). Opet, ako provjerite izvornu sliku, možda ćete vidjeti da je (Uzbekistan) prvo odozdo, a prvo slijeva.
I posljednje, ali ne najmanje važno ...
Da, na kraju, zadnji div popunjavamo ID-om trećine. Pravila su ista, a ako pogađate da smo se pomaknuli odozdo prema vrhu, to je istina.
Sada trenutak istine ...
U slučaju gore, kretali smo se duž osi X i Y kako bismo određene dijelove slike prikazali zastavicama. Idući lijevo-dolje dobili smo Bosnu (os X), odozdo i lijevo (os Y) Tajland i Uzbekistan. Kao što ste vidjeli, koristimo samo jednu sliku, a to znači samo jedan zahtjev za sliku.
Važno je znati da kada gradite spriteove, ta osnovna slika treba imati iste dijelove slika u sebi, radi vaše udobnosti. Kao u ovom slučaju kada se krećemo prema lijevoj i desnoj, gornjoj i donjoj strani, prema veličini dijela plus bijeli prostor. Uzbekistan (89 piksela) i Tajland (178 piksela) imaju razliku od 89 piksela, što je njihova stvarna veličina (87 piksela) plus bijeli prostor (1 piks + 1 piks).
Da, i vi možete raditi animacije.
Da bismo napravili ovaj stil slatkih, cool old school animacija, trebaju nam samo svojstva CSS animacije. U ovom smo slučaju premještali izvornu sliku po X-osi i dobili smo ovu animaciju u starom stilu. Vjerujte mi sa spritovima, nema ograničenja.
Jednostavno je to :)
Nadam se da ste uživali čitajući ovaj članak.
Pratite još ...
