Sprites png. CSS spraitu izveide
Sprites ir diezgan interesants un vienkārša tehnoloģija. Tagad es jums pastāstīšu mazliet vairāk par to.
Kas ir CSS spraiti?
Īsāk sakot, CSS sprites ir vairāki attēli vienā failā. Ir viens fails, bet tajā ir vairāki attēli. Tajā pašā laikā apmeklētājam tas ir pilnīgi neredzams. Kādam, kurš apskata vietni, šķiet, ka viņš redz vairākus atsevišķus attēlus.
Kāpēc tas ir vajadzīgs? Sprites samazina lietotāja veikto lapu pieprasījumu skaitu un samazina kopējo attēlu izmēru. Rezultātā apmeklētājs vietni redzēs ātrāk.
Kā tas tiek darīts? Parasts attēls palielinās platumā un augstumā, tas ir, vairāki attēli tiek vienkārši novietoti blakus parastajam attēlam. Pēc tam katrs atsevišķais attēls no šī komplekta tiek aizstāts ar nepieciešamais bloks ar noteiktu platumu vai augstumu, lai visi pārējie attēli nebūtu redzami. Viss komplekts ir apgriezts un paliek tikai viens attēls. Viens spraits. Visi pārējie attēli paliek ārpus konkrētā bloka.
Lai padarītu to skaidrāku, es sniegšu analoģiju. Iedomājieties, ka skatāties caur atslēgas caurumu. Jūs redzat tikai atsevišķu telpas daļu durvju otrā pusē. Ja jūs nedaudz pavirzāties uz sāniem un ieskatāties alā no cita leņķa, jūs redzēsit kādu citu tās pašas telpas gabalu.
Terminoloģija
Lai izvairītos no neskaidrībām, nekavējoties definēsim terminus:
Sprite- šis ir viens attēls no faila ar vairākiem attēliem.
Sprite komplekts ir pats fails ar vairākiem attēliem.
Spraita izmantošanas iezīmes
Kad jums vajadzētu izmantot spraitus? Kopumā ir viena atbilde - spraitus vajadzētu izmantot, ja lapā ir daudz mazu attēlu. Nav svarīgi, kādi attēli tie ir. Ja jums ir daudz gradientu ar vienu un to pašu atrašanās vietu, daudz pogu, daudz ikonu utt. Ja konkrētā lapā ir daudz mazu attēlu, varat apsvērt iespēju izmantot spraitus.
Lapā parasti ir trīs veidu attēli – jpg, png un gif. Visiem šiem formātiem ir divi lejupielādes režīmi - parastais režīms un pakāpeniskās lejupielādes režīms.
JPG formāts var būt regulārs (pamata) vai progresīvs (progresīvs). IN parastais režīms attēls tiek parādīts rindu pa rindiņai, kad tas tiek ielādēts un nekavējoties tiek parādīts laba kvalitāte. Progresīvā režīmā jpg bilde Tas tiek lejupielādēts pilnībā uzreiz, taču sliktā kvalitātē, un lejupielādes laikā kvalitāte palielinās.
Gif un png darbojas vienādi. GIF var būt regulārs vai rindpārleces. PNG var būt regulārs vai rindpārleces. Interlaced gif un png uzvedība ir līdzīga progresīvā jpg. Šī darbība nedaudz palielina faila lielumu.
Kopā. Attēls var parādīties lapā nekavējoties vai arī tas var parādīties ar kavēšanos. Tas ir svarīgi zināt, kad runa ir par spraitiem. Ieteicams spraitus izveidot ar savītiem vai progresīviem. Lietotājam ir jāredz attēli pēc iespējas ātrāk, lai gan sliktā kvalitātē.
Bet! Ja galīgais fails ar visiem spraitiem ir pārāk liels, tad, neskatoties uz visu progresivitāti un pīšanos, apmeklētājam būs jāgaida pat daļēja faila lejupielāde. Tāpēc es neiesaku izmantot lielus spraitu komplektus. Ja fails ir liels, tad viss spraitu jēga ir pilnībā zaudēta - lai paātrinātu vietni. Izmantojot lielus spraitu komplektus, lietotājam būs jāgaida tikpat ilgi, ja ne ilgāk, nekā ar parastiem sadalītiem attēliem.
Faili, kas lielāki par 30 kilobaitiem, man šķiet lieli. Tas ir subjektīvi. Jums var būt savas idejas par faila lielumu. 30 kilobaitu fails tiks lejupielādēts aptuveni 7 sekundēs ar interneta ātrumu 56,6 kbps.
Spraita izmantošanas piemēri
Sprites ar ikonām
Vienā spraitā man būs ikonas:
- Saraksts - viena ikona
- Saites - trīs ikonas
- Meklēšanas formas - viena ikona
Tas ir, manā pirmajā spraitu komplektā būs piecas bildes. Man būs visas bildes vienāda izmēra- 16 x 16 pikseļi. Sprites var izmantot, lai izveidotu attēlus ar dažādu izšķirtspēju, nav nepieciešams, lai visu attēlu izšķirtspēja sakrīt. Izmantojot dažādas attēlu izšķirtspējas, ir nedaudz grūtāk apvienot šos attēlus vienā failā.
Rezultātā pirmais piemērs izskatīsies šādi:
Es atradu piecas ikonas. Tad es tos visus vienkārši apvienoju vienā failā. Šis ir fails, ar kuru es beidzu:
Es pievēršu jūsu uzmanību. IN šajā gadījumā Ikonas neatrodas cieši, starp tām ir nelieli ievilkumi. Kā izvēlēties šos ievilkumus? Jūs, protams, varat aprēķināt visu pa pikseļiem, taču mūsu gadījums ir diezgan vienkāršs, tāpēc šeit vislabāk ir eksperimentāli atlasīt šos atkāpes attēlā. Pirmkārt, mēs apvienojam attēlus vienkārši ar aci, pēc tam uzņemam augšējo attēlu un ievietojam to pareizajā vietā. Ja bilde ir savā vietā, bet tajā pašā laikā no kaut kurienes izlīst kāda cita attēla gabals, tad ir jāpalielina ievilkums.
Vēl viena lieta. Pēdējā ikona sarakstā ir saraksta ikona — zaļa bultiņa. Kāpēc viņa ir pēdējā? Atlikušo ikonu atrašanās vieta attēlā mums ir vienaldzīga, taču sarakstā jebkurš vienums var aizņemt vairākas rindiņas, un, ja zaļā bultiņa ir kaut kur pa vidu, tad nākamajās rindās tiks izcelti citi attēli. Apskatiet augšējo saraksta attēlu, lai redzētu, par ko es runāju.
Tātad. Es atradu piecas ikonas un apvienoju tās vienā failā. Ko darīsim tālāk? Protams, mēs rakstām kodu:
- Saraksta vienums
- Vēl viens saraksta vienums
- Saraksta vienums
- Vēl viens saraksta vienums
bet divās rindās - Saraksta vienums
- Vēl viens saraksta vienums
Šis ir saraksta html kods. Tagad izmantosim tam savu sprite:
Ul li(polsterējums:0 0 0 21px; fons:url("sprites.png") 0–94 pikseļi bez atkārtošanās; )
Ko mēs šeit esam izdarījuši? Katrs ar atkāpi
Beigsim ar sarakstu. Tagad izveidosim saites aptuveni tādā pašā veidā:
A(polsterējums:0 0 0 20px; fons:url("sprites.png") 0–42px bez atkārtošanas; ) a(polsterējums:0 0 0 20px; background:url("sprites.png") 0 -21px neatkārtoties)
Ko nozīmē a selektori? Acīmredzot šis atlasītājs liek pārlūkprogrammai pieteikties šis stils uz visām saitēm, kurām ir atribūts href, kura vērtība sākas ar rindiņu http://site/. Pats spraits tiek izmantots tāpat kā saraksta gadījumā. Es izskatīšu tikai vienu saiti - saiti uz manu emuāru.
- Mēs nosakām nepieciešamo saiti pēc href.. Jūs varat vienkārši piešķirt klasi vēlamajai saitei vai pievienot stilu atribūtam stilu tieši html kodā. Vai arī identificējiet vajadzīgo saiti, izmantojot jebkuru citu metodi.
- Mēs izveidojam 20 pikseļus no konkrētas saites kreisās malas
- Norādīt kā fona attēlu attēls sprites.png
- Attēls, ko izvēlējos savam emuāram, ir 21 pikseļa attālumā no augšējās malas, kas nozīmē, ka mums ir jāpārvieto fons par 21 pikseli uz leju. CSS es to uzrakstīju šādi: "0 -21px"
Mājas darbs
Sprites ar gradientiem
Tagad apskatīsim otro piemēru. 
Šajā attēlā redzams logs. Logam ir galvene, pamatteksts un kājene. Katram no šiem elementiem ir iestatīts fona gradients. Paskatieties tuvāk, ja tas nav uzreiz redzams, ir krāsu pāreja no bāla uz piesātinātu.
Es jums parādīšu, kā gradientus šajā logā var pārvērst spraitos. Loga galvenei un kājenei būs fiksēts augstums – 30 pikseļi. Loga korpuss izstiepsies atkarībā no teksta garuma.
Tagad ierakstīsim loga html kodu:
Sāksim izmantot spraitus. Sāksim ar loga nosaukumu:
#window-header( augstums: 30 pikseļi; fons: #C0C0FF url("gradients.png") 0 0 atkārtojums-x; )
Gradients.png failā vispirms ir gradients galvenei, pēc tam pamattekstam un tad apakšējai rindai. Tas ir, titula gradients sākas no pašas augšas. Tāpēc mēs vienkārši iestatām pašu failu kā fonu un norādām pozīciju kā “0 0”, tas ir, nekur neatkāpieties. Lai gradients izstieptos horizontāli, ierakstiet “repeat-x”.
Lai nodrošinātu, ka viss gradients iekļaujas galvenē, iestatiet augstumu uz 30 pikseļiem.
Iestatīsim kājenes gradientu tāpat kā galvenei:
#window-footer( augstums: 30 pikseļi; fons: #C0FFC0 url("gradients.png") 0 -60 pikseļi atkārtojums-x; )
Tikai šoreiz mēs pārvietosim attēlu uz leju par 60 pikseļiem.
Situācija ar loga korpusu ir sarežģītāka. Mūsu ķermenis izstiepsies atšķirībā no galvenes un kājenes. Tas ir, ja mēs vienkārši izveidosim vienu div loga korpusam un ievietosim tur gradientu, tad visi gradienti šajā div parādīsies uzreiz. Alternatīvi, mēs varam novietot korpusa gradientu vertikāli, bet ja mums ir vairāki gradienti blokiem, kas stiepjas? Jūs nevarat visu izdarīt uzreiz. Mēs to darīsim mazliet gudrāk.
CSS kods būs šāds:
#window-body(pozīcija:relatīvais; ) #window-body-gradient(pozīcija:absolūtais; pa kreisi:0; augšā:0; platums:100%; augstums:30px; fons:url("gradienti.png") 0 - 30 pikseļu atkārtojums-x ) #window-body-text( position:relative; )
Tagad es jums pastāstīšu sīkāk, ko mēs šeit darījām. Šeit ir atsevišķi loga pamatteksta html kods:
Kā redzat, mums ir vēl divas dīvas, kas iestrādātas korpusā. Pirmais "loga korpusa gradients" būs atbildīgs par gradientu. Otrais “window-body-text” ir paredzēts tekstam. Turklāt, kā redzams no CSS koda, mēs izmantojām pozīciju: relatīvais; visam loga korpusam.
Gradienta div mēs norādām position:absolute. Tādējādi mēs izslēdzām gradienta div no vispārējās plūsmas. Tagad šis div neko neietekmē. Tā kā esam norādījuši pozīciju: relatīvs visam ķermenim, gradienta div nepeld nekur tālāk par vecāku. Pievienojiet to loga korpusa kreisajai un augšējai malai, izmantojot “left:0; augšā:0;". Iestatiet gradienta div augstumu uz 30 pikseļiem. Tas ir, šeit mēs norādām gradienta augstumu, ko mēs pievienosim, ja divvirziena augstums ir lielāks par gradienta augstumu, tad divi spraiti izcelsies. Un visbeidzot mēs pievienojam gradienta div failu gradients.png. Kā parasti, mēs pārvietojam fonu uz augšu par nepieciešamo attālumu, mēs pārvietojam fonu par 30 pikseļiem uz augšu.
Tagad mums ir gradients loga korpusā. Bet tas aizsedz tekstu. Lai teksts netiktu aizsegts, mēs visu tekstu iesaiņosim div un piešķirsim tam pozīciju: relatīvs. Pēc piešķiršanas teksts būs gradienta augšpusē.
Tas būtībā arī viss. Tagad mēs savā logā esam ievietojuši visus gradientus. Un galvenē, un korpusā, un pagrabā.
Es sniedzu tik garus paskaidrojumus, lai viss būtu pilnīgi skaidrs. Bet patiesībā, ja jūs zināt nedaudz par izkārtojumu, tad, iespējams, jums pietiks, ja aplūkojat pašus piemērus:
Kārtējo reizi dublēju saiti.
Patiesībā jūs varat izdomāt daudzus spraitu izmantošanas piemērus. Es parādīju tikai divus piemērus, taču ar šiem piemēriem vajadzētu pietikt, lai saprastu, kā darbojas spraiti. Ja jums ir kādi jautājumi, jautājiet komentāros.
Sludinājumi
Sprite ir bezkrāsains, citronu un laima garšas, bezkofeīna bezalkoholiskie dzērieni, ko radījis Coca-Cola. Tas tika izstrādāts Rietumvācijā 1959. gadā ar nosaukumu Fanta Klare Zitrone un ieviests ASV kā Sprite 1961. gadā.
(Kokss), Fanta, 7 Up, Mist Twst. Sprite un Pepsi dzērieni ir klases, ko sauc par sodas/bezalkoholiskajiem dzērieniem, piemēri. Cilvēki dzer soda dažādu iemeslu dēļ, tostarp; salda garša, ērts iepakojums, pieejamība un citi, lai remdētu slāpes.
Viena sodas kārba satur 10 tējkarotes cukura. Šis cukura daudzums, īpaši šķidrā veidā, straujš cukura līmeņa paaugstināšanās asinīs un insulīns izraisa ķermeņa reakciju. Laika gaitā tas var izraisīt diabētu vai insulīna rezistenci, nemaz nerunājot par svaru un citām veselības problēmām.
Sludinājumi
Kādas ir sprite sastāvdaļas?
Gāzēts ūdens, kukurūzas sīrups ar augstu fruktozes saturu, citronskābe, dabīgie aromatizētāji, nātrija citrāts, nātrija benzoāts (garšas aizsardzībai).
Lejupielādējiet Sprite PNG attēlu caurspīdīgo galeriju.
Izšķirtspēja: 800 × 2352
Izmērs: 1645 KB
Attēla formāts: .png
Izšķirtspēja: 409 × 1350
Izmērs: 127 KB
Attēla formāts: .png 
Izšķirtspēja: 825×825
Izmērs: 283 KB
Attēla formāts: .png 
Izšķirtspēja: 444 × 853
Izmērs: 97 KB
Attēla formāts: .png 
Izšķirtspēja: 512×512
Izmērs: 186 KB
Attēla formāts: .png 
Izšķirtspēja: 256 × 256
Izmērs: 41 KB
Attēla formāts: .png 
Izšķirtspēja: 1600 × 1200
Izmērs: 625 KB
Attēla formāts: .png
Izšķirtspēja: 985 × 3524
Izmērs: 1072 KB
Attēla formāts: .png 
Izšķirtspēja: 901 × 810
Izmērs: 711 KB
Attēla formāts: .png
Mūsdienu vietnēs var atrast lielu skaitu dažāda veida grafiku: produktu attēlus, lietotāju iemiesojumus, attēlus, kas veido lapu dizainu, pogas, ikonas, logotipus utt. Un jo lielāks projekts, jo vairāk grafisko failu tiek izmantots. Atverot atsevišķu vietnes lapu pārlūkprogrammā, tiek ielādēti visi tās elementi. Tāpēc, ja tajā ir pārāk daudz grafikas, ielādes ātrums mēdz ievērojami samazināties. Kas, savukārt, ir pilns ar neērtībām jūsu projekta apmeklētājiem.
CSS sprites
Ieslēgts mājas lapa Ir grafisko failu augšupielādes forma (katram failam ir atsevišķa poga). Sākotnēji ir redzamas tikai trīs lejupielādes pogas. Ja jums ir nepieciešams vairāk, noklikšķiniet uz "Nepieciešams vairāk".
Kad visi nākotnes CSS sprite faili ir atlasīti, noklikšķiniet uz pogas “Opcijas”. Jūsu priekšā tiks atvērts neliels panelis ar iestatījumiem. Šeit jūs varat iestatīt polsterējumu starp elementiem pikseļos, pievienot rāmi attēliem, izlīdzināt visus attēlus gatavajā spraitā kreisajā vai augšējā malā un iestatīt fona krāsu RGB formātā.
Pēc noklikšķināšanas uz pogas “Ģenerēt” tiks tieši izveidots CSS sprite. Jūs redzēsiet arī nelielus norādījumus par tā lietošanu, proti, CSS kodu, kas jums būs jāievieto savā vietnē. HTML ir pat piemērs. Es nedomāju, ka ir problēma to izdomāt.
Vizuāli Dan’s Tools CSS Sprite Generator ir diezgan jauks CSS sprite ģenerators ar daudziem iestatījumiem. Varat, piemēram, izvēlēties vertikālu vai horizontālu ikonu ievietošanas veidu kopējā attēlā.
CSS sprites
Pakalpojumā CSS Sprites viss ir ārkārtīgi vienkāršs gan dizainā, gan iestatījumos. Ir iespēja izvēlēties iegūto attēla formātu: PNG, JPEG, GIF. Lapā ir saite uz sprite ģenerēšanas adaptīvo versiju - Responsive CSS Sprites (lai gan neesmu mēģinājis).
Kopā. Principā esam apsvēruši visas nianses, kā izveidot CSS spraitus un tos izmantot. Ģeneratori palīdzēs paātrināt elementu izveides procesu, taču jūs varat iztikt ar Photoshop. Ja jums ir kādi jautājumi, rakstiet komentāros.
Patika:
27
Nepatika: 4
Tulkojums nav pieejams.
sprite
uz vai pēc"uz""pēc""pēc"
dusmīgs_putns dusmīgs.png. index.html
UTF-8 index.html Windows-1251 stils.css dusmīgs_putns
http://spritecow.com
angry.png,
dusmīgs_putns stila fails stils.css imgs/. Man sanāca šādi:
Tulkojums nav pieejams.
CSS sprites ir jūsu tīmekļa vietnes grafika, kas apvienota vienā grafiskais fails. "Kāpēc viens fails?" - tu jautā. Fakts ir tāds, ka šāda pieeja attēlu glabāšanai ļauj uzlabot tīmekļa lapu veiktspēju, kā arī uzglabāt grafiskie attēli organizētāk. Apskatīsim dažus no labāko praksi izmantojot spraitus. Pats spraitu nosaukums var atgādināt par spēļu spraitiem, retro spēļu konsolēm un pat pārlūkprogrammas spēlēm, kas mūsdienās ir tik populāras:
Tātad, piemērojot tīmekļa dizainu, sprite ir tikai viens liels fails, kurā ir vairāki jūsu vietnes attēli, tādējādi ietaupot laiku faila lejupielādei un pārsūtīšanai tīklā. Ja spraitā, piemēram, ir 20–30 attēli, tas var ievērojami atvieglot servera slodzi, jo, ja šie attēli tiktu glabāti atsevišķi, serverim būtu jāveic 20–30 atsevišķi pieprasījumi, lai iegūtu katru šādu attēlu. Pateicoties spraitam, serverim tiek nosūtīts tikai viens HTTP pieprasījums - lai saņemtu vienu attēlu. Sprite var nebūt vizuāli “salasāms” acij, jo tā galvenais uzdevums ir tikai salikt kopā dažādus jūsu dizaina “gabalus”. Piemēram, spraits varētu izskatīties šādi:
Sprites izmanto lielākā daļa mūsdienu vietņu, un labi zināmā VKontakte nav izņēmums. Piemēram, tas vienā failā saglabā interfeisa "gabalus" - proti, pazīstamās ikonas:
Lieliskā lieta, izmantojot CSS spraitus, ir tāda, ka serverim ir jānosūta tikai viens grafiskais fails, kurā ir visi jūsu attēli, nevis daudzi atsevišķi attēli, un, izmantojot CSS, varat parādīt jebkuru nelielu šī grafiskā faila segmentu kā elementa fonu. Daži cilvēki domā, ka atsevišķi attēli tiek ielādēti ātrāk, taču tā nav taisnība. Ielādējot vienu grafisko failu ar daudzām bildēm, serverim nosūtām tikai vienu pieprasījumu un ielādējot liels daudzums bildes - nosūtām vēl pieprasījumus uz serveri. Attēlu apvienošana vienā failā ne tikai ievērojami samazina HTTP pieprasījumu skaitu, betun samazināt kopējo attēla faila lielumu.
Ļaujiet man sniegt jums vēl vienu spraita piemēru. Tā ir veids, kā viena labi pazīstama Rietumu vietne, kas veltīta dizainam, glabā grafiskos elementus:
Jūs varat jautāt - kad ir labākais laiks, lai sagatavotu spritu? Tam ir divas dažādas pieejas.
Dažādas pieejas – sprite veidošana pirms un pēc vietnes izveides
Veidojot sprite lapu, ir divas izplatītas pieejas – izveidojiet touz vai pēcizveidojot savu vietni. Pirms vietnes izveides varat ievietot visus attēlus sprite lapā. To mēs saucam par pieeju"uz". Turklāt jūs varat izveidot visus attēlus kā atsevišķi faili, kas atvieglo to rediģēšanu. Kad vietne ir izveidota un visi attēli ir sagatavoti, varat ātri un vienkārši izveidot sprite lapu vai nu manuāli, vai izmantojot kādu no vairākiem rīkiem. Mēs to sauksim par pieeju"pēc". Ja sprite lapas jums ir jaunums vai esat iesācējs Web dizaina jomā, šī pieeja būs jums piemērotāka"pēc". Ir daudz utilītu, pakalpojumu un programmu, kas palīdz izveidot spraitus, no kuriem lielākā daļa tiek izplatīti un pieejami bez maksas.
Bilžu kārtošana spraitā organizētā veidā
Veidojot spritu Photoshop, vēlams uzreiz visus attēlus sakārtot sakārtoti un noteiktā secībā, kuru esat izvēlējies, lai vēlāk darbs ar tiem būtu viegls un vienkāršs. Mēģiniet vienmēr noapaļot vietu katram spraitam attēlam līdz tuvākajiem 10 pikseļiem vai atstājiet ap tiem vairāk vietas, ja tie visi ir vienāda izmēra. Kad runa ir par CSS stila rakstīšanu, jums nebūs jāpieraksta koordinātu mērījumi, un ir mazāka iespēja aizmirst vajadzīgo attēlu koordinātu numurus. Šeit ir piemērs, kā veiksmīgi ievietot dažādus attēlus vienā spraitā:
No teorijas uz praksi! Izveidojiet animētu putnu no Angry Birds, izmantojot spraitu
Tātad, mēs iepazināmies ar sprite jēdzienu Web dizainā, bet teorija bez prakses nav nekas. Tāpēc tagad jūs un es izveidosim savu pirmo spritu un iemācīsimies taisīt vienkārša animācija HTML lapā. Mūsu piemērs būs balstīts uz spēles varoni Angry Birds- tas ir smieklīgs sarkans putns. Vispirms sagatavosim sprite attēlu .PNG formātā, kas satur 4 putnu animācijas fāzes:
Izveidosim direktoriju kaut kur diskā dusmīgs_putns- mēs tur ievietosim savus piemēru failus. Saglabājiet spraitu ar putniem šajā direktorijā un izsauciet failu dusmīgs.png. Nākamais solis ir izveidot failu tajā pašā direktorijā ar nosaukumu index.html- šī būs mūsu testa lapa ar animāciju. Pēc tam atveriet šo failu redaktorā un ievietojiet tur šādu kodu:
Ļaujiet man nedaudz paskaidrot, ko mēs tagad esam darījuši. Pirmkārt, mēs iestatām kodējumu mūsu HTML dokumentam UTF-8, kas nozīmē, ka mums ir jāsaglabā savs index.htmlšajā kodējumā. Varat arī norādīt citu, piemēram, Windows-1251, - mūsu uzdevumam tas nav svarīgi. Tālāk mēs savienojām stila failu ar dokumentu stils.css(tas vēl nav mūsu katalogā dusmīgs_putns, mēs to izveidosim nedaudz vēlāk). Mēs arī iestatījām saiti uz ārēju skriptu un iekļāvām jQuery bibliotēku - ar izmantojot jQuery Mēs dinamiski mainīsim mūsu putna attēlus un mainīsim tā “fāzes” no spraita. Esam sagatavojuši arī iekšējo JavaScript bloku, kurā pēc tam ievietosim kodu, kas animē putnu. Un visbeidzot, dokumenta galvenajā daļā ir viena hipersaite, kuras iekšpusē ir DIV bloks, un tā ID ir iestatīts uz birdImage , un noklusējuma klase ir bird-sleeping . Tas nozīmē, ka mūsu putns, atverot lapu, “gulēs” - tas atbilst apakšējā kreisajā attēlā sprita iekšpusē, kur tā acis ir aizvērtas. Tagad ir pienācis laiks “nogriezt” mūsu spraitu, t.i. atlasiet no tā atsevišķus attēlus.
Spraita griešana, izmantojot pakalpojumu SpriteCow.Com
Spraita "sagriešanas" uzdevums ir diezgan darbietilpīgs - tas prasa rūpību, lai nepieļautu kļūdas ar koordinātām, kas nosaka katru spraitā attēlu. Par laimi, šodien ir pakalpojumi, kas pilnībā novērš šīs galvassāpes dizaineram un maketētājam. Es izmantoju pakalpojumu http://spritecow.com griešanai un iesaku to jums. Pakalpojuma būtība ir vienkārša un ļoti ērta - mēs ar peli atlasām katru putna attēlu, un SpriteCow iedod mums gatavu CSS kodu ar koordinātām. Viss, kas mums jādara, ir vienkārši iestatīt 4 stilus katrai putna fāzei! Ieejot vietnē, mēs redzam 2 pogas - “Atvērt attēlu” un “Rādīt piemēru”. Mums ir nepieciešama pirmā poga, noklikšķiniet uz tās:
Atvērtajā dialoglodziņā atlasiet mūsu sprite failu angry.png, pēc tam mēs redzam, kā mūsu sprite ir ielādēts vietnē. Tālāk mums ir jānosaka fona krāsa, lai to izdarītu, noklikšķiniet uz rīkjoslas “Izvēlēties fonu” un norādiet uz mūsu spraita balto laukumu - tas ļaus mums pareizi izgriezt katru putna fāzi:
Atlasiet pirmo attēlu un automātiski iegūstiet tam CSS kodu:
Tagad ir pienācis laiks izveidot mūsu katalogā dusmīgs_putns stila fails stils.css. Tur mēs secīgi ievietojam 4 ģenerētus CSS koda gabalus, bet standarta .sprite klases vietā, ko mums piedāvā SpriteCow, nosauksim savus stilus skaidrāk. Turklāt, tā kā sprite attēlu glabājam tieši direktorija saknē, mēs noņemsim nevajadzīgo ceļa elementu no fona rekvizīta - imgs/. Man sanāca šādi:
/* "parastais" putns. Augšējais kreisais attēls spraitā */ .bird-normal ( fons: url("angry.png") no-repeat -12px -16px; platums: 97px; augstums: 94px; ) /* "Laimīgs" putns. Augšējais labais attēls spraitā */ .bird-happy ( fons: url("angry.png") no-repeat -118px -17px; platums: 97px; augstums: 94px; ) /* "Sleeping" putns. Apakšējais kreisais attēls spraitā */ .bird-sleeping ( fons: url("angry.png") no-repeat -12px -120px; platums: 97px; augstums: 94px; ) /* "Angry" bird. Apakšējais labais attēls sprite formātā */ .bird-angry ( fons: url("angry.png") no-repeat -118px -120px; platums: 97px; augstums: 94px; )
Pēdējais solis ir rakstīt jQuery kodu, kas izveido animāciju.
Tagad, kad esam veiksmīgi izgriezuši spraitu un katram failā ievietojuši 4 stilus stils.css, viss, kas mums jādara, ir jāieraksta jQuery kods, kas pievienos animāciju, virzot kursoru virs mūsu hipersaites un noklikšķinot uz saites. Kā atceramies, pēc noklusējuma mums ir klase putnu gulēšana , t.i. mūsu sarkanais putns "iemigs" atverot dokumentu :)
Visas animācijas pamatā būs 3 jQuery metodes:
- hover — apdarinātājs kursora virzīšanai virs saites un kursora pārvietošanai prom no saites. Virzot kursoru, putns “pamodīsies” - t.i. klase kļūs par putnu parastu
- peles leju — apdarinātājs, lai noklikšķinātu uz saites ar peles kreiso pogu. Šajā gadījumā putns kļūs “laimīgs” - t.i. DIV blokam tiks piešķirta klase putns-laimīgs
- mouseup — peles kreisās pogas atbrīvošanas apstrādātājs. Atbrīvojoties, putns kļūs "dusmīgs" - t.i. DIV blokam tiek piešķirta klase putns-dusmīgs
Tātad, ielīmējiet šo kodu vietā, kurā sagatavojāmies iekštelpu vienība Lapā ievietots JavaScript:
$(document).ready(function() ( // šeit ir jQuery kods, kas izveido animāciju $("#birdImage").hover(function() ( $(this).removeClass("putns guļ"); $ (this).removeClass("putns-dusmīgs"); $(this).removeClass("putns-laimīgs"). ).removeClass("putns-normāls"); $(this).removeClass("putns-dusmīgs"); $(this).removeClass("putns-laimīgs"); " "); )); $("#birdImage") (šis).removeClass("putns-dusmīgs"); $(šis). ).removeClass("putns-normāls"); $(this).removeClass("putns-laimīgs" $(this).addClass("putns-dusmīgs");
Gatavs! Animācijas testēšana
Nu lūk! Mūsu putns ir gatavs un ar savu animāciju ir ienesis lapā dzīvību! :) Demo var apskatīties. Lejupielādējiet arhīvu ar piemēru raksta apakšā.
