CSS Image Sprites'i sissejuhatus: neid on lihtne õppida ja neid on hea teada

Piltide spritid on siin olnud alates 1970. aastatest. Neid kasutati Atari ja muude konsoolide esimeste arvutianimatsioonide jaoks. Mida aeg edasi, seda vähem kasutasid neid arendajad, kes soovisid 3D- ja virtuaalreaalsuse jaoks täpsemat (loe: realistlikku) graafikat.

Viimastel aastatel on nad siiski tagasi tulnud.

Sprite on arvutigraafika mõiste kahemõõtmelise bitikaardi jaoks, mis on integreeritud suuremasse stseeni.

Viimase paari aasta jooksul kasvasid Facebook, Twitter, Instagram ja paljud teised sotsiaalmeedia platvormid pööraseks. Kasvuga kaasnes nende vajadus optimeerida igal võimalikul juhul ja vähendada serveripäringute mahtu. Siis läksid CSS-i pildipritsid peavoolu tagasi.

Sellise platvormi jaoks nagu Facebook - kus on rohkem kui 1 miljard kasutajat - nõuab ikoonide, piltide ja sarnase sisu kuvamine mitu serveripäringut. Taotlused koormavad liiklust asjatult.

Mida siis teha, et vähendada serveripäringuid ja ribalaiust? Pöörake CSS-pildipritside poole.

Profiilipildi taotlemise asemel võimaldavad spritid kasutada ühte pilti, mis tähendab ainult ühte päringut. Selle pildi abil saate neid pilte näidata ühe suurema pildi osadena.

Vaatame näidet lipude kohta:

Vaatame nüüd, kuidas see töötab:

Nagu ülaltoodud koodist näete, oleme loonud kolmest divist koosneva aluse, kus iga div saab olema sprite kandur.

Esiteks valisime esimese ID-ga div-i. Meie divil on nii kõrgus kui laius, mis kuvatakse meie lehel. Taustana laadime pildi URL-iga (“//i.postimg.cc/R0N7nkH9/flags.png”) .

Järgmine asi on meie taustpildi vähendamine / suurendamine tausta suurusega: 1400 pikslit. (Saame kasutada pikslite tegelikku suurust, protsenti, em või rem.) See parameeter võimaldab meil pilti "suumida" kuni punktini, kus kuvatakse ainult teatud osa pildist.

Lõpuks kaks parameetrit, mis tulevad pärast tausta:

URL („// i.postimg.cc/R0N7nkH9/flags.png") liigutab põhipildi osa, mis on nähtav mööda X- ja Y-telge. See tähendab, et antud juhul taust:

URL (“// i.postimg.cc/R0N7nkH9/flags.png") -86px -87px; näitame seda osa, mis on nihutatud pildi ülaosast 87 piksli ülalt ja 86 pikslit vasakult .

Esimene number ( -86px ) tähistab X-telge, kus negatiivne tähendab vasakult paremale liikumist ja positiivne tähistab paremalt vasakule liikumist. Teisi numbreid (-87px) kasutatakse nihutamiseks ülevalt alla, kus kehtivad ümberpööratud reeglid, positiivne arv tähendab liikumist alt üles ja negatiivset muidugi ülalt alla.

Nagu originaalpildil näha, on meie (Bosnia) saadud lipp tõepoolest ülevalt teine ​​ja vasakult teine.

Piisavalt hea? OK jätkame.

Täitkem nüüd div sekundi ID-ga. Kohaldatakse samu seadistamise reegleid ja ainus muudatus on see, et sel juhul jääme esialgsele X-teljele (0px) ja Y-suund läheb alumisest osast ülemise poole (89px). Jällegi, kui kontrollite originaalpilti, võite näha, et (Usbekistan) on esimene alt ja vasakult.

Ja viimane, kuid mitte vähem oluline ...

Jah, viimaks täidame viimase divi ID-ga kolmandaks. Reeglid on samad ja kui arvasite, et liikusime alt ülespoole, siis see on tõsi.

Nüüd tõehetk ...

Ülaltoodud juhul liikusime mööda X- ja Y-telge, et näidata lipu abil pildi teatud osi. Paremale vasakule ja alla liikudes saime Bosnia (X-telg), alt ja vasakule (Y-telg) liikudes Tai ja Usbekistan. Nagu nägite, kasutame ainult ühte pilti ja see tähendab ainult ühte pildipäringut.

Oluline on teada, et spritide ehitamisel peaksid sellel põhipildil olema teie enda mugavuse huvides samad pildiosad. Nagu sel juhul, kui liigume vasakule ja paremale, ülemisele ja alumisele osale portsjoni suuruse ja valge ruumi järgi. Usbekistani (89 pikslit) ja Tai (178 pikslit) erinevus on 89 pikslit, mis on nende tegelik suurus (87 pikslit) pluss tühimik (1 pikser 1 piksel).

Jah, saate ka animatsioone teha.

Selle stiilsete vanade kooli animatsioonide tegemiseks vajame ainult CSS-i animatsiooni omadusi. Sel juhul liigutasime algset pilti mööda X-telge ja saime selle vana stiili animatsiooni. Uskuge mind spritidega, piire pole.

See on sama lihtne kui see :)

Loodan, et teile on meeldinud seda artiklit lugeda.

Püsige lainel veel ...