Na moderných stránkach nájdete veľké číslo grafika najrozmanitejších typov: obrázky produktov, používateľské avatary, obrázky tvoriace dizajn stránok, tlačidlá, ikony, logá atď. A čím väčší projekt, tým viac grafických súborov sa tam používa. Keď v prehliadači otvoríte samostatnú stránku lokality, načítajú sa všetky jej prvky. Preto, keď je na ňom umiestnených príliš veľa grafiky, rýchlosť sťahovania sa zvykne výrazne znížiť. Čo je zase spojené s nepríjemnosťami pre návštevníkov vášho projektu.
CSS Sprites
Na domovskej stránke existuje formulár na nahrávanie grafických súborov (pre každý súbor je samostatné tlačidlo). Spočiatku sú viditeľné iba tri tlačidlá na sťahovanie. Ak potrebujete viac, kliknite na „Potrebujete viac“.
Po výbere všetkých súborov pre budúci sprite CSS kliknite na tlačidlo „Možnosti“. Pred vami sa otvorí malý panel s nastaveniami. Tu môžete nastaviť zarážky medzi prvkami v pixeloch, pridať rám pre obrázky, zarovnať všetky obrázky v hotovom sprite vľavo alebo hore, nastaviť farbu pozadia vo formáte RGB.
Po kliknutí na tlačidlo "Generovať" sa zobrazí priame vytváranie cssškriatok. Uvidíte aj malý návod na jeho použitie, a to CSS kód, ktorý budete musieť umiestniť na svoju stránku. Existuje dokonca príklad v HTML. Pochopiť, myslím, nie je problém.
Vizuálne je Dan's Tools CSS Sprite Generator dostatočne pekným generátorom CSS sprite s mnohými možnosťami. Môžete si napríklad zvoliť vertikálny alebo horizontálny typ vkladania ikon do celkového obrázku.
CSS Sprites
V službe CSS Sprites je všetko mimoriadne jednoduché v dizajne aj v nastaveniach. Na výber je formát výsledného obrázku: PNG, JPEG, GIF. Na stránke je odkaz na adaptívna verzia generovanie sprite - Responzívne CSS Sprites (aj keď som to neskúšal).
Celkom. V zásade sme zvážili všetky nuansy, ako vytvoriť CSS sprite a použiť ich. Generátory pomôžu urýchliť proces vytvárania prvkov, ale môžete si vystačiť s Photoshopom. Ak máte nejaké otázky, napíšte do komentárov.
Sprites sú celkom zaujímavá a jednoduchá technológia. Teraz vám o tom poviem trochu viac.
Čo sú to CSS sprite?
Stručne povedané, CSS sprite je niekoľko obrázkov v jednom súbore. Existuje len jeden súbor, ale v ňom je niekoľko obrázkov. Zároveň je pre návštevníka úplne neviditeľný. Tomu, kto si prezerá stránku, sa zdá, že vidí niekoľko samostatných obrázkov.
Prečo je to potrebné? Škriatkovia znižujú počet požiadaviek na stránku od používateľa a zmenšujú celkovú veľkosť obrázkov. Vďaka tomu návštevník uvidí stránku rýchlejšie.
Ako sa to robí? Bežný obrázok zväčšuje šírku a výšku, to znamená, že niekoľko obrázkov je umiestnených vedľa seba na bežnom obrázku. Potom je každý jednotlivý obrázok z tejto sady nahradený požadovaný blok s danou šírkou alebo výškou tak, aby neboli viditeľné všetky ostatné obrázky. Celá sada je odrezaná a zostáva len jeden obrázok. Jeden škriatok. Všetky ostatné obrázky zostávajú mimo konkrétneho bloku.
Dovoľte mi uviesť analógiu, aby to bolo jasnejšie. Predstavte si, že sa pozeráte cez kľúčovú dierku. Na druhej strane dverí vidíte len nejaký samostatný kúsok miestnosti. Ak sa posuniete trochu nabok a pozriete sa do skaziny z iného uhla, uvidíte nejaký iný kúsok tej istej miestnosti.
Terminológia
Aby sme sa nemýlili, hneď si označme pojmy:
Sprite- toto je jeden obrázok zo súboru s niekoľkými obrázkami.
Súprava Sprite je samotný súbor s viacerými obrázkami.
Vlastnosti používania škriatkov
Kedy by ste mali používať škriatkov? Odpoveď je vo všeobecnosti rovnaká – škriatkovia by sa mali používať, ak máte na stránke veľa malých obrázkov. Nezáleží na tom, aké obrázky sú. Ak máte veľa prechodov s rovnakým rozložením, veľa tlačidiel, veľa ikon atď. Ak je na konkrétnej stránke veľa malých obrázkov, môžete premýšľať o použití sprite.
Na stránke sú spravidla tri typy obrázkov - jpg, png a gif. Všetky tieto formáty majú dva režimy sťahovania – normálny režim a režim postupného sťahovania.
Formát jpg môže byť normálny (základný) a progresívny (progresívny). AT normálny režim obrázok sa začne zobrazovať riadok po riadku pri načítaní a okamžite do dobrá kvalita. V progresívnom režime obrázok jpg sťahuje naraz, ale v zlej kvalite a ako sťahovanie postupuje, kvalita sa zvyšuje.
GIF a png majú rovnaké správanie. GIF môže byť pravidelný alebo prekladaný. PNG môže byť obyčajný alebo prekladaný. Správanie prekladaných gif a png je podobné ako pri progresívnom jpg. Toto správanie mierne zvyšuje veľkosť súboru.
Celkom. Obrázok sa môže na stránke zobraziť okamžite alebo sa môže zobraziť s oneskorením. Čo sa týka škriatok, toto je dôležité vedieť. Škriatkovia by mali byť prednostne prekladané alebo progresívne. Používateľ by mal vidieť obrázky čo najskôr, aj keď v zlej kvalite.
Ale! Ak je výsledný súbor so všetkými spritami príliš veľký, tak aj napriek všetkej progresívnosti a prekladania si návštevník bude musieť počkať aj na čiastočné stiahnutie súboru. Preto neodporúčam používať veľké súpravy sprite. Ak je súbor veľký, potom sa celá pointa šprtov úplne stratí – zrýchliť stránku. OD veľké sady sprites, používateľ bude musieť čakať rovnako, ak nie viac, ako pri použití bežných samostatných obrázkov.
Veľké súbory sa mi zdajú nad 30 kilobajtov. Je to subjektívne. Môžete mať nejaké vlastné predstavy o veľkosti súboru. 30 kilobajtový súbor sa stiahne približne za 7 sekúnd pri rýchlosti internetu 56,6 kbps.
Príklady použitia Sprite
Škriatkovia s ikonami
V jednom sprite budem mať ikony pre:
- Listbox - jedna ikona
- Odkazy - tri ikony
- Vyhľadávacie formuláre – jedna ikona
To znamená, že prvá sada škriatok, ktoré mám, bude obsahovať päť obrázkov. Všetky obrázky budú mať rovnakú veľkosť – 16 x 16 pixelov. Sprites môžu vytvárať obrázky s rôznym rozlíšením, nie je potrebné, aby rozlíšenie všetkých obrázkov bolo rovnaké. S rôznymi rozlíšeniami obrázkov je o niečo ťažšie spojiť tieto obrázky do jedného súboru.
V dôsledku toho bude prvý príklad vyzerať takto:
Našiel som päť ikon. Potom som ich všetky spojil do jedného súboru. Toto je súbor, s ktorým som skončil:
Upútať Vašu pozornosť. V tomto prípade nie sú ikony umiestnené blízko, sú medzi nimi malé zarážky. Ako si vybrať tieto zarážky? Samozrejme, môžete všetko vypočítať podľa pixelov, ale náš prípad je celkom jednoduchý, takže tu je najlepšie zvoliť tieto zarážky na obrázku experimentálne. Najprv obrázky spojíme len podľa oka, potom zoberieme najvrchnejší obrázok a umiestnime ho na správne miesto. Ak je obrázok na svojom mieste, no zároveň odniekiaľ vytŕča kúsok iného obrázka, treba odsadenie zväčšiť.
Ešte moment. Posledná ikona v zozname je ikona pre zoznam - zelená šípka. Prečo je posledná? Nezáleží nám na umiestnení zvyšku ikon na obrázku, ale ktorákoľvek položka v zozname môže zaberať niekoľko riadkov a ak je zelená šípka niekde v strede, na ďalších riadkoch vyčnievajú ďalšie obrázky . Pozrite sa na obrázok zoznamu vyššie, aby ste videli, o čom hovorím.
Takže. Našiel som päť ikon, spojil som ich do jedného súboru. čo budeme robiť ďalej? Samozrejme napíšeme kód:
- Položka zoznamu
- Ďalšia položka na zozname
- Položka zoznamu
- Ďalšia položka na zozname
ale v dvoch riadkoch - Položka zoznamu
- Ďalšia položka na zozname
to html kód zoznam. Teraz naň aplikujte nášho sprite:
Ul li( padding:0 0 0 21px; background:url("sprites.png") 0 -94px no-repeat; )
Čo sme tu urobili? V každom urobil zarážku
Skončíme so zoznamom. Teraz urobme rovnaké odkazy:
A( padding:0 0 0 20px; background:url("sprites.png") 0 -42px no-repeat; ) a( padding:0 0 0 20px; background:url("sprites..png") 0 -21px neopakuj sa ;)
Čo znamenajú selektory a? Tento selektor samozrejme spôsobí, že sa použije prehliadač daný štýl na všetky odkazy, ktoré majú atribút href, ktorého hodnota začína reťazcom http://website/. Samotný sprite sa aplikuje v podstate rovnakým spôsobom ako v prípade zoznamu. Budem zvažovať iba jeden odkaz - odkaz na môj blog.
- Definujeme požadovaný odkaz by href.. Môžete jednoducho priradiť triedu k požadovanému odkazu alebo napísať štýly do atribútu style priamo v html kóde. Alebo identifikujte požadovaný odkaz akýmkoľvek iným spôsobom.
- Urobíme odsadenie od ľavého okraja konkrétneho odkazu v 20 pixeloch
- Uveďte ako obrázok na pozadí obrázok sprates.png
- Obrázok, ktorý som si vybral pre svoj blog, je 21 pixelov zhora, čo znamená, že musíme posunúť pozadie o 21 pixelov nadol. V css som to napísal takto "0 -21px"
Domáca úloha
Škriatkovia s prechodmi
Teraz sa pozrime na druhý príklad. 
Tento obrázok zobrazuje okno. Okno má nadpis, telo a pätu. Každý z týchto prvkov má nastavený gradient pozadia. Pozrite sa pozorne, ak to nie je okamžite viditeľné, existuje farebný prechod z bledej na nasýtenú.
Ukážem vám, ako sa z prechodov v tomto okne dajú urobiť škriatkovia. Nadpis a päta okna budú mať pevnú výšku – 30 pixelov. Telo okna sa roztiahne podľa dĺžky textu.
Teraz napíšme html kód okna:
Začnime používať škriatkov. Začnime názvom okna:
#window-header( height:30px; background:#C0C0FF url("gradients.png") 0 0 repeat-x; )
V súbore gradients.png je najprv prechod pre nadpis, potom pre telo a potom pre spodná čiara. To znamená, že sklon pre názov začína úplne zhora. Preto jednoducho nastavíme samotný súbor ako pozadie a označíme polohu ako „0 0“, to znamená, že nikam neustupujeme. Ak chcete, aby sa gradient natiahol vodorovne, napíšte „repeat-x“.
Aby sa prechod úplne zmestil do nadpisu, určíme výšku 30 pixelov.
Rovnako ako hlavička, nastavíme prechod pre pätu:
#window-footer( height:30px; background: #C0FFC0 url("gradients.png") 0 -60px repeat-x; )
Len tentoraz posunieme obrázok nadol o 60 pixelov.
S korpusom okna je situácia zložitejšia. Telo bude na rozdiel od hlavičky a päty natiahnuté. To znamená, že ak urobíme len jeden div pre telo okna a dáme tam gradient, tak sa v tomto div objavia všetky prechody naraz. Prípadne môžeme prechod pre telo umiestniť ako posledný vertikálne, ale čo ak máme viacero prechodov pre bloky, ktoré sa rozťahujú? Nedá sa robiť všetko naraz. Urobíme to trochu zložitejšie.
CSS kód bude nasledujúci:
#window-body( position:relative; ) #window-body-gradient( position:absolute; left:0; top:0; width:100%; height:30px; background:url("gradients.png") 0 - 30px repeat-x; ) #window-body-text( position:relative; )
Teraz vám poviem viac o tom, čo sme tu robili. Tu je samostatný html kód tela okna:
Ako vidíte, v tele máme zakomponované ďalšie dve divy. Prvý "okno-telo-gradient" bude zodpovedný za gradient. Druhý „text-okna-telo-textu“ je pre text. Okrem toho, ako je zrejmé z kódu CSS, sme použili pozíciu: relatívnu; pre celé teleso okna.
Pre gradient div zadávame position:absolute. Takto sme vyradili gradient div zo všeobecného toku. Teraz tento div nič neovplyvňuje. Keďže máme pozíciu: relatívnu pre celé telo, gradient div nepláva nikde ďalej ako rodič. Pripevnite ho k ľavému a hornému okraju telesa okna pomocou „left:0; hore: 0;". Nastavte výšku prvku div gradientu na 30 pixelov. To znamená, že tu uvádzame výšku gradientu, ktorý pripevníme, ak je výška divu väčšia ako výška gradientu, tak v dive budú trčať ďalšie sprity. Nakoniec pripojte náš súbor gradients.png k prechodu div. Ako obvykle, posunieme pozadie nahor o požadovanú vzdialenosť, v tomto prípade posunieme pozadie o 30 pixelov nahor.
Teraz máme prechod v tele okna. Ale to zakrýva text. Aby text nebol prekrytý, celý text zalomíme do prvku div a priradíme mu pozíciu: relatívne k nemu. Po priradení bude text na vrchu prechodu.
Vo všeobecnosti je to všetko. Teraz sme umiestnili všetky prechody do nášho okna. A v hlavičke, v tele a v pivnici.
Robím také dlhé vysvetlenia, aby bolo všetko úplne jasné. Ale v skutočnosti, ak ste trochu zbehlí v rozložení, potom vám pravdepodobne bude stačiť pozrieť sa na samotné príklady:
Znovu som duplikoval odkaz.
V skutočnosti môžete prísť s mnohými príkladmi použitia škriatkov. Ukázal som len dva príklady, ale tieto príklady by mali stačiť na pochopenie toho, ako škriatkovia fungujú. Ak máte nejaké otázky, opýtajte sa ich v komentároch.
Páčilo sa:
27
Nepáči sa mi: 4
Nie je dostupný žiadny preklad.
škriatok
predtým alebo po"pred""po""po"
nahnevaný vták nahnevaný.png. index.html
UTF-8 index.html okná-1251 style.css nahnevaný vták
http://spritecow.com
nahnevaný.png,
nahnevaný vták súbor štýlu style.css imgs/. Mám to takto:
Nie je dostupný žiadny preklad.
CSS sprite sú grafika pre vašu webovú stránku spojená do jedného grafického súboru. "Prečo jeden súbor?" - pýtaš sa. Faktom je, že tento prístup k ukladaniu obrázkov vám umožňuje zvýšiť výkon webových stránok, ako aj ukladať grafické obrázky organizovanejšie. Pozrime sa na niektoré z osvedčených postupov pri používaní sprite. Už samotný názov škriatok vám môže pripomínať herných škriatkov, retro hracia konzola a dokonca aj prehliadačové hry, ktoré sú dnes také populárne:
Takže, použiteľné pre web dizajn, škriatok- je len jeden veľký súbor, ktorý obsahuje niekoľko obrázkov pre vašu stránku, čo šetrí čas pri sťahovaní a prenose súboru cez sieť. Keď sprite obsahuje napríklad 20 – 30 obrázkov, môže to výrazne znížiť zaťaženie servera, pretože ak by boli tieto obrázky uložené oddelene, server by musel vykonať 20 – 30 samostatných požiadaviek, aby získal každý takýto obrázok. . Vďaka sprite ide na server iba jedna HTTP požiadavka - získať jeden obrázok. Škriatk nemusí vyzerať vizuálne „čitateľne“ na pohľad, pretože jeho hlavnou úlohou je iba zhromaždiť rôzne „kúsky“ vášho dizajnu. Sprite môže vyzerať napríklad takto:
Sprites používa väčšina moderných stránok a známy VKontakte nie je výnimkou. Napríklad takto ukladá „kúsky“ rozhrania do jedného súboru – menovite známe ikony všetkým:
Základným bodom používania CSS spritov je, že na server stačí poslať jeden grafický súbor obsahujúci všetky vaše obrázky, nie veľa jednotlivých obrázkov – a pomocou CSS môžete zobraziť akýkoľvek malý segment z tohto grafického súboru ako pozadie pre prvok. Niektorí ľudia si myslia, že jednotlivé obrázky sa načítavajú rýchlejšie, ale nie je to tak. Pri nahrávaní jedného grafického súboru s mnohými obrázkami posielame na server iba jednu požiadavku a pri nahrávaní veľkého množstva obrázkov posielame na server viac požiadaviek. Spojenie obrázkov do jedného súboru umožňuje nielen výrazne znížiť počet HTTP požiadaviek, alea zmenšiť celkovú veľkosť súboru obrázka.
Dovoľte mi uviesť ďalší príklad škriatka. Takto ukladá grafické prvky jedna známa západná stránka venovaná dizajnu:
Môžete sa spýtať – kedy je najlepší čas na prípravu sprite? Sú na to dva rôzne prístupy.
Rôzne prístupy - vytvorenie sprite pred a po vytvorení stránky
Pri vytváraní spritesheetu existujú dva bežné prístupy – urobte topredtým alebo povytvorenie vašej stránky. Pred vytvorením lokality môžete do hárku sprite vložiť všetky obrázky. Toto nazývame prístup"pred". Okrem toho môžete vytvárať všetky obrázky ako samostatné súbory, čo uľahčuje ich úpravu. Keď je stránka vytvorená a všetky obrázky sú pripravené, môžete rýchlo a jednoducho vytvoriť hárok sprite, buď ručne alebo pomocou jedného z niekoľkých nástrojov. To je to, čo budeme nazývať prístup"po". Ak sú pre vás hárky sprite novinkou alebo ak ste novým webovým dizajnom, potom je tento prístup pre vás vhodnejší."po". Existuje mnoho pomôcok, služieb a programov, ktoré vám pomôžu vytvoriť sprity, z ktorých väčšina je distribuovaná a dostupná zadarmo.
Usporiadanie obrázkov v sprite organizovaným spôsobom
Pri vytváraní sprite vo Photoshope je vhodné okamžite umiestniť všetky obrázky organizovaným spôsobom a v určitom konkrétnom poradí, ktoré si vyberiete, aby sa s nimi neskôr pracovalo ľahko a jednoducho. Pokúste sa vždy zaokrúhliť priestor pre každý obrázok sprite na najbližších 10 pixelov, alebo ponechajte okolo nich viac miesta, ak sú všetky rovnako veľké. Pokiaľ ide o písanie CSS stylingu, nebudete si musieť zapisovať súradnicové miery a je menej pravdepodobné, že zabudnete čísla so súradnicami požadovaných obrázkov. Tu je príklad úspešného umiestnenia rôzne obrázky v jednom sprite:
Od teórie k praxi! Ako vytvoriť animovaného vtáka Angry Birds pomocou sprite
Takže sme sa zoznámili s pojmom sprite vo webdizajne, ale teória bez praxe nie je nič. Preto teraz vytvoríme nášho prvého sprite a naučíme sa, ako ho vyrobiť jednoduchá animácia na stránke HTML. Náš príklad bude založený na postave z hry Angry Birds - je to zábavný červený vták. Najprv si pripravme obrázok sprite vo formáte .PNG, ktorý obsahuje 4 fázy animácie vtákov:
Niekde na disku si vytvoríme adresár nahnevaný vták- tam umiestnime súbory nášho príkladu. Do tohto adresára uložíme sprite s vtákmi a pomenujeme súbor nahnevaný.png.Ďalším krokom je vytvorenie súboru v rovnakom adresári s názvom index.html- toto bude naša testovacia stránka s animáciou. Potom otvorte tento súbor v editore a vložte tam nasledujúci kód:
Dovoľte mi trochu vysvetliť, čo sme práve urobili. Najprv sme dali nášmu HTML dokumentu kódovanie UTF-8, čo znamená, že si musíme zachovať svoje index.html v tomto kódovaní. Môžete nastaviť aj inú, napr. okná-1251, nie je pre našu úlohu nevyhnutné. Ďalej sme pripojili súbor štýlu k dokumentu style.css(zatiaľ nie je v našom katalógu) nahnevaný vták, vytvoríme ho neskôr). Nastavili sme aj odkaz na externý skript a zahrnuli sme knižnicu jQuery – s jQuery budeme dynamicky meniť obrázky nášho vtáka a meniť jeho "fázy" zo škriatka. Pripravili sme aj interný JavaScript blok, kde umiestnime kód, ktorý robí animáciu vtáka. No a nakoniec, hlavná časť dokumentu obsahuje jeden hypertextový odkaz, v ktorom je blok DIV a jeho ID je nastavené ako birdImage a predvolená trieda je bird-sleeping . To znamená, že náš vtáčik pri otvorení stránky „zaspí“ – to zodpovedá ľavému dolnému obrázku vo vnútri sprite – kde má zatvorené oči. Teraz je na rade "strih" nášho šprtíka, t.j. extrahovať z neho jednotlivé obrázky.
Strihanie sprita pomocou služby SpriteCow.Com
Úloha „krájania“ sprita je dosť pracná – vyžaduje si opatrnosť, aby ste sa nepomýlili so súradnicami, ktoré definujú každý obrázok v sprite. Našťastie dnes existujú služby, ktoré túto bolesť hlavy dizajnéra a dizajnéra rozloženia úplne odstránia. Na krájanie používam a odporúčam http://spritecow.com. Podstata služby je jednoduchá a veľmi pohodlná - myšou vyberieme každý obrázok vtáka a SpriteCow nám poskytne hotový kód CSS so súradnicami. Jediné, čo musíme urobiť, je nastaviť 4 štýly pre každú fázu vtáka! Po vstupe na stránku vidíme 2 tlačidlá - "Otvoriť obrázok" a "Zobraziť príklad". Potrebujeme prvé tlačidlo, kliknite naň:
V dialógovom okne, ktoré sa otvorí, vyberte náš súbor sprite nahnevaný.png, potom vidíme, ako sa náš sprite načítal na stránku. Ďalej musíme definovať farbu pozadia, klikneme na panel s nástrojmi "Vybrať pozadie" a ukážeme na bielu oblasť nášho sprite - to správne vystrihne každú fázu vtáka:
Vyberte prvý obrázok a automaticky preň získajte kód CSS:
Teraz je čas vytvoriť v našom katalógu nahnevaný vták súbor štýlu style.css. Postupne tam vložíme 4 vygenerované kúsky CSS kódu, ale namiesto štandardnej triedy .sprite, ktorú nám ponúka SpriteCow, nazvime naše štýly zrozumiteľnejšie. Keďže je obrázok sprite uložený priamo v koreňovom adresári, odstránime nepotrebný prvok cesty z vlastnosti pozadia - imgs/. Mám to takto:
/* "obyčajný" vták. Obrázok vľavo hore v sprite */ .bird-normal ( background: url("angry.png") no-repeat -12px -16px; width: 97px; height: 94px; ) /* "Happy" bird. Obrázok vpravo hore v sprite */ .bird-happy ( background: url("angry.png") bez opakovania -118px -17px; šírka: 97px; výška: 94px; ) /* "Spiaci" vták. Obrázok vľavo dole v sprite */ .bird-spie ( background: url("angry.png") no-repeat -12px -120px; width: 97px; height: 94px; ) /* "Angry" bird. Obrázok vpravo dole v sprite */ .bird-angry ( background: url("angry.png") no-repeat -118px -120px; width: 97px; height: 94px; )
Posledným krokom je napísanie kódu jQuery, ktorý vytvorí animáciu.
Teraz, keď sme sprite úspešne rozrezali a umiestnili 4 štýly pre každý obrázok do nášho súboru style.css, musíme len napísať kód jQuery, ktorý pridá animáciu pri umiestnení kurzora myši na náš hypertextový odkaz a po kliknutí na odkaz. Ako si pamätáme, štandardne máme nastavenú triedu bird-spiace, t.j. náš červený vtáčik "zaspí" pri otváraní dokumentu :)
Všetky animácie budú založené na 3 metódy jQuery:
- hover - handler pre nasmerovanie na odkaz a "opustenie" kurzora z odkazu. Keď pohneme kurzorom, vtáčik sa „prebudí“ – t.j. trieda sa stane vtáčím normálnym
- mousedown - obsluha kliknutia ľavým tlačidlom myši na odkaz. Vtáčik sa v tomto prípade stane „šťastným“ – t.j. Blok DIV dostane classbird-happy
- mouseup - handler na uvoľnenie ľavého tlačidla myši. Po vypustení sa vtáčik „nahnevá“ – t.j. Blok DIV má triedu bird-angry
Takže vložte nasledujúci kód na miesto, ktoré sme pripravili vo vnútornom bloku JavaScript umiestnenom na stránke:
$(document).ready(function() ( // tu je kód jQuery, ktorý vytvorí animáciu $("#birdImage").hover(function() ( $(this).removeClass("bird-spie"); $ (this).removeClass("vták-nahnevaný"); $(toto).removeClass("vták-šťastný"); $(this).addClass("bird-normal"); ), function() ( $( toto ).removeClass("vtak-normal"); $(toto).removeClass("vtak-nahnevany"); $(toto).removeClass("vtak-šťastne"); $(this).addClass("vtak- spí" "); )); $("#obrazok vtáka").mousedown(function() ( $(this).removeClass("bird-spie"); $(this).removeClass("bird-normal"); $( this).removeClass("bird-angry"); $(this).addClass("bird-happy"); )).mouseup(function() ( $(this).removeClass("bird-spiace") ; $ (toto).removeClass("vtak-normal"); $(toto).removeClass("vtak-spokojny"); $(toto).addClass("vtak-nahnevany"); )); ));
Pripravený! Testovacia animácia
OK, teraz je po všetkom! Náš vták je pripravený a oživil stránku svojou animáciou! :) Môžete si pozrieť demo. Stiahnite si archív s príkladom - v spodnej časti článku.
Reklamy
Sprite je bezfarebný nealkoholický nápoj s citrónom a limetkou s chuťou, bez kofeínu, vytvorený spoločnosťou Coca-Cola. Bol vyvinutý v západnom Nemecku v roku 1959 ako Fanta Klare Zitrone a predstavený v Spojených štátoch ako Sprite v roku 1961.
(Cola), Fanta, 7 Up, Mist Twst. Nápoje Sprite a Pepsi sú príkladmi triedy nazývanej sóda/nealkoholické nápoje. Ľudia pijú sódu z rôznych dôvodov, vrátane; sladká chuť, výhodné balenie, dostupnosť a iné na uhasenie smädu.
Jedna plechovka sódy obsahuje ekvivalent 10 čajových lyžičiek cukru. Toto množstvo cukru, najmä v tekutej forme, prudký nárast hladiny cukru v krvi a inzulínu spôsobuje reakciu v tele. Časom to môže viesť k cukrovke či inzulínovej rezistencii, nehovoriac o váhe a iných zdravotných problémoch.
Reklamy
Aké sú ingrediencie v sprite?
Sýtená voda, kukuričný sirup s vysokým obsahom fruktózy, kyselina citrónová, prírodné arómy, citrát sodný, benzoan sodný (na ochranu chuti).
Stiahnite si priehľadnú galériu obrázkov Sprite PNG.
Rozlíšenie: 800 × 2352
Veľkosť: 1645 kB
Formát obrázka: .png
Rozlíšenie: 409 × 1350
Veľkosť: 127 kB
Formát obrázka: .png 
Rozlíšenie: 825 × 825
Veľkosť: 283 kB
Formát obrázka: .png 
Rozlíšenie: 444 × 853
Veľkosť: 97 kB
Formát obrázka: .png 
Rozlíšenie: 512 × 512
Veľkosť: 186 kB
Formát obrázka: .png 
Rozlíšenie: 256×256
Veľkosť: 41 KB
Formát obrázka: .png 
Rozlíšenie: 1600×1200
Veľkosť: 625 kB
Formát obrázka: .png
Rozlíšenie: 985 × 3524
Veľkosť: 1072 kB
Formát obrázka: .png 
Rozlíšenie: 901 × 810
Veľkosť: 711 kB
Formát obrázka: .png