Sprite koncepcija egzistuoja jau kurį laiką. Tai yra viena iš žaidimų pramonėje dažniausiai naudojamų metodų, skirta paspartinti animacijų rodymą ekrane. Šiame straipsnyje mes ypač panagrinėsime, kaip ši technika gali padėti pagerinti vartotojų patirtį tinklalapiuose naudojant „CSS Sprites“ tokia tvarka:
- Kas yra „Sprite“?
- Kas yra „CSS Sprite“ - greita apžvalga?
- Pavyzdys, kaip tai padeda kurti internetą?
- CSS Sprites naudojimo pranašumai
- Ką kūrėjas turi padaryti dirbdamas su CSS Sprites?
- Kaip sukurti CSS Sprite Sheet?
- Kaip dirbti su CSS Sprites?
- Įmonės, naudojančios CSS Sprites
Kas yra „Sprite“?
„Sprite“ yra vienas vaizdas, kuris yra didesnės žaidimo scenos dalis. Tada keli sprinkai sujungiami į didelį vaizdą, vadinamą sprite lakštu. Į atmintį įkėlus sprite lapą, greitai iš eilės perteikiami skirtingi spritai, kad būtų sukurta animacijos iliuzija. Tai daroma tuo pačiu metu, kad dešimtis iki šimtų skirtingų spritų sukurtų žaidimo sceną.
Pagrindinė mintis yra ta, kad įkelti vaizdą ir parodyti jo dalį visur, kur reikia, yra daug greičiau, palyginti su kelių vaizdų įkėlimu ir jų atvaizdavimu.
Kas yra CSS Sprite: greita apžvalga?
CSS „sprite“ yra metodas, kurį dažnai naudoja interneto kūrėjai, norėdami optimizuoti tinklalapių našumą. Taikant šią techniką, keli mažesni, paprastai vienodų matmenų vaizdai sujungiami į vieną didelį vaizdą, vadinamą a sprite lapas arba plytelių rinkinys . Tada šis sprite lapas naudojamas atskiriems elementams rodyti visur, kur mums jų reikia.
Paprastai tokie elementai kaip logotipai, naršymo rodyklės, mygtukai yra įtraukiami į „sprite“ lapą, nes jie yra beveik vienodų matmenų ir dažnai naudojami tinklalapyje.
Pavyzdys, kaip tai padeda kurti internetą?
Paprastai kuriant tinklalapius vaizdai yra saugomi ir naudojami kaip atskiri failai. Taigi, kai vartotojas atidaro tinklalapį, naršyklė turi pateikti HTTP užklausą kiekvienam iš šių failų, juos atsisiųsti atskirai ir rodyti. Tai lemia ilgesnį puslapio įkėlimo laiką, nes tam tikrame tinklalapyje gali būti daug mažesnių vaizdų, tokių kaip mygtukai, piktogramos, logotipai.
CSS spritai padeda kūrėjams sujungti šiuos dažnai naudojamus mažus vaizdus į vieną didelį vaizdą. Tada naršyklė turi atsisiųsti tik vieną failą, kuris tada naudojamasrodyti reikiamą skyrių kompensuodami vaizdą.
CSS Sprites naudojimo pranašumai
Yra du pagrindiniai CSS įrašų naudojimo pranašumai, palyginti su įprastais vaizdais:
Greitesnis puslapio įkėlimas: Pagreitina puslapio įkėlimo laiką, nes tinklalapyje naudojami vaizdai rodomi iškart, kai atsisiunčiamas lapas.
Didesnis pralaidumas ir mažesnis išteklių naudojimas: Ne tik ši technika pagerina galutinio vartotojo patirtį, nes puslapis greičiau įkeliamas,bet taip pat sumažina tinklo perkrovą, nes pateikiamas mažesnis HTTP užklausų skaičius.
Ką kūrėjas turi padaryti dirbdamas su CSS Sprites?
Dirbdamas su atskirais vaizdais, kūrėjas gali tiesiog dirbti su HTML žyma ir, jei reikia, suformuokite jį CSS. Tačiau dirbdamas su CSS Sprites kūrėjas turi atlikti du konkrečius dalykus:
- „Sprite Sheet“ sukūrimas
Kurdamas tinklalapį, jei kūrėjas nusprendžia naudoti CSS įrašus, jis / ji pirmiausia turi sukurti „sprite“ lapą, sujungdamas visus norimus elementus, tokius kaip mygtukai, logotipai ir pan. Tai galima padaryti naudojant bet kurią vaizdo redagavimo programą, pvz., „Photoshop“ ar „Gimp“. Taip pat yra daugybė internetinių įrankių, kurie padės jums padaryti „sprite“ lapą. Šios priemonės aptariamos vėliau šiame straipsnyje.
perduoti vertę ir perduoti nuorodą java
- Pasiekite konkretų sprite elementą naudodami CSS foninė padėtis nuosavybė
Kai „sprite“ lapas bus paruoštas, kūrėjas turės naudoti CSS atributus, kad pasiektų skirtingas lapo dalis.
- plotis: Sprite plotis
- aukštis: Sprite aukštis
- fonas: Nuoroda į sprite lapą
- Fono padėtis: Poslinkio vertės (pikseliais), kad būtų galima pasiekti tik reikiamą „sprite“ lapo dalį
Kaip sukurti CSS Sprite Sheet?
Norėdami sutvarkyti mažesnius vaizdus į tinklelį, galite naudoti bet kokią vaizdų redagavimo programinę įrangą, tačiau toliau aptariami du lengvesni metodai:
1. Internetinis „Sprite Sheet“ kūrimo įrankis
NUORODA: toptal.com/developers/css/sprite-generator/
Šis įrankis yra ne tik nemokamas, bet ir suteikia jums reikalingą CSS kodą, kurį galima naudoti nurodant sprite lapą. Be to, galite paplušėti įvairiomis savybėmis, pvz., Užpildyti elementus ir pakeisti jų lygiavimą.
2. „Sprite“ lapo su „Sprity“ generavimas
Jei naudojate „Grunt“, „Node“ ar „Gulp“, galite įdiegti „Sprity“ paketą, kuris padės jums sukurti „Sprite“ lapą įvairiais formatais, pvz., PNG, JPG ir kt.
Pirma, turėsite įdiegti „Sprity“ naudodami:
npm įdiegti sprity -g
Tada, norėdami sukurti „sprite“ lapą, naudokite šią komandą:
sprity ./output-directory/ ./input-directory/*.png
Kaip dirbti su CSS Sprites?
Šiame pavyzdyje naudosime šį „sprite“ lapą:
Kaip matote aukščiau esančiame paveikslėlyje, šešios piktogramos („Instagram“, „Twitter“ ir „Facebook“) buvo išdėstytos pagal tinklelį. Pirmoje eilutėje mes turime normalią būseną, o antroje eilėje - jų svyravimo būseną (vaizdas, atsirandantis užvedus ant jų pelės žymeklį).
Jei padarėte „sprite“ lapą naudodamiesi aukščiau aptartais įrankiais, jūs jau žinote CSS reikalingus poslinkius, bet jei naudojote kokį nors kitą įrankį arba jums tiesiog buvo suteiktas „sprite“ lapas, tada nesijaudinkite, mes aptarsime metodą, kuris padės jums išskaityti reikiamą elementą.
Dabar galime pamatyti labai paprastą būdą, kaip gauti reikalingus kiekvienos iš šešių piktogramų poslinkius naudojant „MS Paint“. Galbūt tai nėra idealus sprendimas dirbant su spritais, tačiau kadangi jis turi savybę, kuri suteikia pelės žymeklio koordinates, jį galima naudoti norint gauti reikalingas X ir Y koordinates.
Pirmiausia atidarykite sprite lapo vaizdą (tinklelį, kuriame yra visi mažesni vaizdai) ir užveskite pelės žymeklį viršutiniame kairiajame sprite kampe, kurį norite patraukti.
Kai turėsite viršutinio kairiojo „sprite“ taško koordinates (viršutinį kairįjį „Instagram“ vaizdą), galite parodyti šį konkretų sprite visur, kur reikia, naudodami CSS kodą:
fonas: url ('img_sprites.png')
fono padėtis: 0 0
plotis: 125px
aukštis: 125 taškų
Mes naudojame 125 taškų plotį ir aukštį, nes mūsų piktogramos yra tokio dydžio. Norėdami gauti kitą vaizdą („Twitter“) toje pačioje eilutėje, naudojame šį kodą:
fonas: url ('img_sprites.png')
fono padėtis: -128px 0px
plotis: 125px
aukštis: 125 taškų
Atkreipkite dėmesį į fono padėties atributą aukščiau pateiktame fragmente. (-128px, 0) reiškia, kad sprite lapą į kairę atsveriame 128 taškais (atsižvelgiant į užpildą tarp elementų) ir 0 taškų Y ašyje. Jei norėtume pasiekti „Twitter“ užveskite pelės žymeklį, tada fono padėties atributas būtų:
fono padėtis: -128px -128px
Tokiu būdu dabar galime pasiekti kiekvieną „Sprite“ lapo komponentą naudodami CSS. Peržiūrėkime visą HTML ir CSS kodą, kaip tai padaryti.
1 žingsnis: Reikiamo HTML kodo rašymas
Žemiau pateiktame kode mes tiesiog pridedame tris nuorodas. Taip pat susiesime savo HTML su stilių lentele (screen.css).
2 žingsnis: Rašyti reikiamą CSS. Pirmiausia sukursime savo bendrų piktogramų klasę. Čia matote, kad nurodome mūsų sukurtą „sprite“ lapą.
/ * Bendra piktograma Klasė * /
span.ikoną nuoroda,
span.ikoną a: aplankyta{
ekranas:blokuoti
teksto įtrauka:-9999px
fonas-vaizdas: URL (./ img_sprites.png)
fonas pakartoti:ne kartoti
}
3 žingsnis: Atskirų piktogramų gavimas iš „Sprite“ lapo, naudojant poslinkius.
/ * „Instagram“ piktograma * /
span.instagram nuoroda,
span.instagram a: aplankyta{
plotis:125 taškų
ūgio:125 taškų
fonas-padėtis:0 0
}
/ * „Twitter“ piktograma * /
span.twitter nuoroda,
span.twitter a: aplankyta{
plotis:125 taškų
ūgio:125 taškų
fonas-padėtis:-128px 0
}
/ * „Facebook“ piktograma * /
span.facebook nuoroda,
span.facebook a: aplankyta{
plotis:125 taškų
ūgio:125 taškų
fonas-padėtis:-257px 0
eikite į funkciją „python“
}
4 žingsnis: Užvedimo žymeklio piktogramų gavimas iš sprite lapo, naudojant poslinkius.
span.instagram a: užveskite pelės žymeklį{fonas-padėtis:0 -128px}
span.twitter a: užveskite pelės žymeklį{fonas-padėtis:-128px -128px}
span.facebook a: užveskite pelės žymeklį{fonas-padėtis:-255px -128px}
Įmonės, naudojančios CSS Sprites
Daugelis didelių vardų pramonėje naudoja CSS „Sprites“, kad pagerintų savo svetainių reagavimą. Tokios įmonės kaip „Google“, „Facebook“, „Amazon“ plačiai naudoja šį metodą, nes tai padeda joms sumažinti HTTP užklausų skaičių per konkretų vartotoją. Tai yra didžiulė nauda, kai atsižvelgiame į tai, kad šios įmonės bet kuriuo metu aptarnauja milijonus klientų.
Dabar, kai suprantate, kas yra CSS raštai ir kaip su jais dirbti, jūs esate dar vienas žingsnis arčiau savo kelio mokytis CSS. Tokios sąvokos, kaip „sprites“, šiandien keičia žaidimą, nes kūrėjams tapo nepaprastai svarbu iš tinklalapio išgauti kiekvieną našumą.
Patikrinkite mūsų kuris ateina su instruktorių vedamomis tiesioginėmis treniruotėmis ir realių projektų patirtimi. Šie mokymai leidžia išmokti dirbti su išorinėmis ir išorinėmis interneto technologijomis. Tai apima mokymus apie žiniatinklio plėtrą, „jQuery“, „Angular“, „NodeJS“, „ExpressJS“ ir „MongoDB“.
Turite mums klausimą? Prašau tai paminėti tinklaraščio „HTML vaizdai“ komentarų skyriuje ir mes su jumis susisieksime.