Sprites sú veľmi zaujímavou a jednoduchá technológia. Teraz vám o tom poviem trochu viac.
Čo je CSS Sprites?
Ak krátko, CSS Sprites sú niekoľko obrázkov v jednom súbore. Súbor je jeden, a obrázky vo vnútri je niekoľko. Zároveň je pre návštevníka úplne bez povšimnutia. Podľa toho, kto prezeráte stránku, zdá sa, že vidíte niekoľko samostatných obrázkov.
Prečo to potrebujete? Sprites Znížte počet požiadaviek na stránku od užívateľa a znižujú celkovú veľkosť obrázka. V dôsledku toho návštevník uvidí stránku rýchlejšie.
Ako to urobí? Zvyčajný obraz sa zvyšuje v šírke a výške, to znamená jednoducho na obvyklom obraze, je umiestnený v blízkosti niekoľkých obrázkov. Potom každý samostatný obraz z tejto sady je substituovaný do požadovaného bloku s danou šírkou alebo výškou, aby boli videné všetky ostatné obrázky. Celá sada je rezaná a zostáva len jeden obraz. Jeden sprite. Všetky ostatné obrázky zostávajú mimo špecifického bloku.
Aby bolo jasnejšie priniesť analógiu. Predstavte si, že sa pozeráte do keyhole. Vidíte len nejaký druh samostatného kusu umiestnených na druhej strane dverí. Ak sa pohybujete na stranu a budete sa pozrieť na vyššie v inom uhle, uvidíte nejaký iný kus tej istej miestnosti.
Terminológia
Aby sme nemali zamieňať, okamžite označme podmienky:
Sprite - Toto je jeden obrázok zo súboru s viacerými obrázkami.
Sada sprite - Toto je samotný súbor s viacerými obrázkami.
Vlastnosti používania rozptylu
Kedy stojí za to používať Sprites? Odpoveď je vo všeobecnosti jedna - Sprites je potrebné použiť, ak máte na stránke veľa malých obrázkov. Bez ohľadu na to, aké obrázky sú. Ak máte veľa gradientov s rovnakým miestom, mnoho gombíkov, veľa ikon i.d. Ak je na nejakej samostatnej stránke samostatná stránka, môžete premýšľať o používaní Spritov.
Na stránke sú spravidla tri typy obrázkov - JPG, PNG a GIF. Všetky tieto formáty majú dva režimy načítania - to je normálny režim a spôsob postupného prevzatia.
Formát JPG môže byť obyčajný (základný) a progresívny (progresívny). V normálnom režime sa obraz začne zobraziť na riadkoch založených a okamžite v dobrej kvalite. V progresívnom režime je obraz JPG okamžite načítaný, ale v zlej kvalite a ako načíta sa zvýšenie kvality.
Rovnaké správanie má GIF a PNG. GIF môže byť obyčajný a fascinovaný (interlaced). PNG môže byť časté a fascinované (interlaced). Správanie plniaceho gifu a pNG je podobné správanie progresívneho JPG. Takéto správanie sa mierne zvyšuje veľkosť súboru.
CELKOM. Obrázok sa môže zobraziť na stránke okamžite a môže sa zobraziť s oneskorením. S ohľadom na Sprites je dôležité vedieť. Sprites sú žiaduce robiť fascinujúce alebo progresívne. Užívateľ by mal vidieť obrázky čo najrýchlejšie. Aj keď v zlej kvalite.
Ale! Ak je konečný súbor so všetkými Sprites príliš veľký, potom napriek všetkej progresschopnosti a návštevník bude musieť čakať dokonca čiastočne načítanie súboru. Preto neodporúčam používať veľké sady spritov. Ak je súbor veľký, celý zmysel pre Sprites je úplne stratený - urýchľuje prácu stránky. S veľkými sadami Sprites bude musieť užívateľ počkať toľko, ak nie viac ako pri používaní konvenčných samostatných obrázkov.
Zdá sa, že veľká ma súbory viac ako 30 kilobajtov. Toto je subjektívne. Môžete mať nejaké nápady o veľkosti súboru. Súbor 30 kilobyte bude načítaný asi 7 sekúnd pri rýchlosti internetu 56,6 kbps.
Príklady použitia Sprite
Sprites s ikonami
V jednom, sprej ma bude ikony pre:
- Zoznam - jedna ikona
- Odkazy - tri ikony
- Vyhľadávacie formuláre - jedna ikona
To znamená, že prvá sada Sprites bude obsahovať päť obrázkov. Všetky obrázky budem mať rovnakú veľkosť - 16 na 16 pixelov. Môžeme vykonať obrázky s rôznymi oprávneniami do Sprites, nie je potrebné pre riešenie všetkých obrázkov koordinovaných. S iným rozlíšením obrázkov je mierne komplikované kombináciou týchto obrázkov v jednom súbore.
Výsledkom je, že prvý príklad bude vyzerať takto:
Našiel som päť ikon. Potom ich kombinovali všetko v jednom súbore. Tu je taký súbor so mnou v dôsledku toho:
Upútať Vašu pozornosť. V tomto prípade nie sú ikony blízko, medzi nimi sú malé zarážky. Ako si vybrať tieto zarážky? Samozrejme, že je možné vypočítať všetko na pixely, ale náš prípad je pomerne jednoduchý, takže je najlepšie vybrať si tieto zarážky na obrázku experimentálne. Po prvé, kombinujeme obrázky len na oku, potom berieme najviac horný obraz, dajte ho na správne miesto. Ak je obrázok na mieste, ale kdekoľvek sa zastaví kus iného obrazu, potom sa musí zarážka zvýšiť.
Iný bod. Ten v zozname sa zobrazí ikona pre zoznam - zelená šípka. Prečo je posledná? Umiestnenie ostatných ikon na obrázku je pre nás ľahostajné, ale v zozname môže niektorá položka trvať niekoľko riadkov a ak je zelená šípka niekde v strede, potom ďalšie obrázky budú sledovať na nasledujúcich riadkoch. Pozrite sa na zoznam vyššie uvedeného zoznamu, porozumieť tomu, o čom hovorím.
So. Našiel som päť ikon, kombinovať ich do jedného súboru. Čo robíte ďalej? Samozrejme napíšte kód:
- Zoznam
- Ešte jeden zoznam
- Zoznam
- Ďalší zoznam položiek,
Ale v dvoch riadkoch - Zoznam
- Ešte jeden zoznam
Toto je kód zoznamu HTML. Teraz budeme aplikovať naše sprite:
Ul li (polstrovanie: 0 0 21px; pozadia: URL ("Sprites.png") 0 -94PX NO-REPEAT;)
Čo sme tu urobili? Vykonali zarážku v každom
Dokončiť so zoznamom. Teraz uveďte približne rovnaké odkazy:
A (Padding: 0 0 20PX; pozadie: URL ("Sprites.png") 0 -42PX NO-REPEAT;) A (Padding: 0 0 0 20PX; pozadia: URL ("Sprites..png") 0 -21PX NO -Preat;)
Čo znamenajú voliči? Je zrejmé, že tento volič spôsobí, že prehliadač aplikuje tento štýl na všetky odkazy, ktoré majú atribút HREF, ktorej hodnota začína z http: // Site / ROW. Samotné sprite sa aplikuje približne rovnaké ako v prípade zoznamu. Budem zvážiť len jeden odkaz - odkaz na môj blog.
- Definujeme požadovaný odkaz HREF .. Môžete jednoducho priradiť triedu požadovaného odkazu alebo štýlov zápisu v štýle atribútu priamo na HTML kód. Alebo identifikovať požadovaný odkaz na akúkoľvek inú metódu.
- Vytvorenie merania z ľavého okraja konkrétneho odkazu v 20 pixeloch
- Špecifikujeme ako obrázok obrázkov na pozadí Sprites.png
- Obrázok, ktorý som zdvihol pre môj blog, je vo vzdialenosti 21 pixelov z horného okraja, to znamená, že pozadie musíme presunúť 21 pixelov dole. V CSS som zaregistroval toto "0 -21px"
Domáca úloha
Sprites s gradientmi
Pozrime sa na druhý príklad. 
Tento obrázok zobrazuje okno. Okno má titulok, telo a suterén. Každý z týchto prvkov má gradient na pozadí. Zvážte, či nie je okamžite viditeľné, existuje prechodová farba z bledého na nasýtenú.
Ukážem, ako môžu triedy v tomto okne vyrobené Sprites. Názov a suterén okien bude pevná výška - 30 pixelov. Teleso okna dosiahne v závislosti od dĺžky textu.
Teraz napíšte kód okna HTML:
Začneme aplikáciu Sprites. Začnime s oknom názvu:
# Window-Header (Výška: 30px; pozadia: # C0C0FF URL ("gradients.png") 0 0 Repeat-X;)
V gradientoch.png File najprv ide na stupeň pre titul, potom pre telo a potom na dolný riadok. To znamená, že stupeň pre titul začína od samého vrcholu. Preto sme jednoducho dali súbor sám a pozícia označujeme ako "0 0", to znamená, že nie je ustúpiť. Aby sa gradient natiahol pozdĺž horizontálne zaregistrovať "Repeat-X".
Aby bola milosť celého v choderi, uveďte výšku 30 pixelov.
Rovnako ako titul, dáme gradient na suterén:
# Okno-päty (výška: 30px; pozadie: # c0FFC0 URL ("gradients.png") 0 -60PX Repeat-X;)
Len tentoraz posúvame obrázok do 60 pixelov.
So telom okna je situácia ťažšia. Na rozdiel od hlavičky a suterénu budeme natiahnuť telo. To znamená, že ak jednoducho urobíme jeden div pre telo okna a položíme tam gradid, potom sa v tejto divom objavia všetky gradienty. Ako možnosť, môžete dať gradient pre telo trvať vertikálne, ale čo keby sme mali niekoľko gradientov pre bloky, ktoré sú ťahané? Každý nebude robiť posledný. Urobíme trochu mazanie.
CSS kód bude nasledovné:
# Okno-telo (poloha: relatívna;) # gradient okna (poloha: absolútna; vľavo: 0; top: 0; šírka: 100%; výška: 30px; pozadia: URL ("gradients.png") 0 - 30px Repeat-X;) # Window-Body-Text (Poloha: Relatívne;)
Teraz vám poviem viac Čo sme tu urobili. Tu je okno okna okna HTML samostatne:
Ako vidíte v tele, máme ďalšie dva ponory. Prvý "okno-boot-gradient" bude zodpovedný za gradient. Na text je potrebný druhý "textový text". Okrem toho, ako je zrejmé z CSS kódu, aplikujeme pozíciu: relatívna; Pre celé telo okna úplne.
Pre gradient diva, špecifikujeme pozíciu: Absolútne. Tak sme vyraďovali gradientové divízie z celkového prietoku. Teraz táto divná neovplyvňuje nič. Vzhľadom k tomu, že pre celé telo sme úplne indikované pozíciou: relatívna, potom gradient Diva pláva rodiča. Pripojte ho do ľavého a horného okna okna okna pomocou "Left: 0; Top: 0; ". Uvádzame výšku gradientu diva - 30 pixelov. To znamená, že tu uvediete výšku gradientu, ktorú budeme pripojené, ak je výška divia väčšia ako výška gradientu, potom sa v DIVA uväznených ďalších škriatkov. A nakoniec pripojíme naše gradienty.png na gradient diva .png. Ako obvykle posúvame pozadie v požadovanej vzdialenosti, v tomto prípade presunovíme pozadie o 30 pixelov smerom nahor.
Teraz v tele okien máme gradient. Ale zatieľuje text. Aby text nebol klaňať po celom texte v Dive a priradiť ju: Relatívne. Po pridelení textu bude nad gradientom.
Všeobecne platí, že je to všetko. Teraz vložíme všetky gradienty v našom okne. A v názve av tele a v suteréne.
Robím také dlhé vysvetlenia, takže všetko bolo vôbec jasné. Ale v skutočnosti, ak rozumiete rozloženiu trochu, potom budete pravdepodobne vidieť samotné príklady:
Opäť duplipoval odkaz.
V skutočnosti môžete vymyslieť mnoho príkladov o používaní Spritov. Ukázal som len dva príklady, ale tieto príklady by mali stačiť na pochopenie princípov práce Spritov. Ak zostali nejaké otázky, potom sa opýtajte v komentároch.
Reklamy.
Sprite je bezfarebný, citrón a vápno s chuťou, nealkoholické nápoje bez kofeínu, ktoré vytvára COCA-COLA. Bola vyvinutá v Západnom Nemecku v roku 1959 ako Fanta Klare Zitrone a zaviedla v Spojených štátoch ako Sprite v roku 1961.
(Koks), fanta, 7 hore, hmla Twst. Sprite a Pepsi Drinks sú príkladmi triedy nazývanej SODA / LIKNIKY. Ľudia pijú sódu, z rôznych dôvodov, vrátane; Sladká chuť, pohodlné balenie, dostupnosť a ostatní uhasiť ich smäd.
Jedna plechovka sódy obsahuje ekvivalent 10 lyžičiek cukru. Toto množstvo cukru, najmä v kvapalnej forme, prudký nárast krvného cukru a inzulínu spôsobuje reakciu v tele. Postupom času to môže viesť k diabetes alebo inzulínovej rezistencii, nehovoriac o hmotnosti a iných zdravotných problémoch.
Reklamy.
Aké sú zložky v sprite?
Oxidovaná voda, sýtený kukuričný sirup, kyselina citrónová, prírodné príchute, citrát sodný, benzoát sodný (na ochranu chuti).
Stiahnite si Sprite PNG Images Transparentná galéria.
Rozlíšenie: 800 × 2352
Veľkosť: 1645 kB
Formát obrazu: .png
Rozlíšenie: 409 × 1350
Veľkosť: 127 kB
Formát obrazu: .png 
Rozlíšenie: 825 × 825
Veľkosť: 283 KB
Formát obrazu: .png 
Rozlíšenie: 444 × 853
Veľkosť: 97 KB
Formát obrazu: .png 
Rozlíšenie: 512 × 512
Veľkosť: 186 KB
Formát obrazu: .png 
Rozlíšenie: 256 × 256
Veľkosť: 41 KB
Formát obrazu: .png 
Rozlíšenie: 1600 × 1200
Veľkosť: 625 kB
Formát obrazu: .png
Rozlíšenie: 985 × 3524
Veľkosť: 1072 KB
Formát obrazu: .png 
Rozlíšenie: 901 × 810
Veľkosť: 711 KB
Formát obrazu: .png
Na moderných stránkach nájdete veľký počet rôznych typov grafiky: obrazy tovaru, užívateľské avatary, obrázky tvoriace návrh stránky, tlačidlá, ikony, logá, atď. A čím väčší projekt sa tam používajú viac grafických súborov. Keď otvoríte samostatnú stránku stránky v prehliadači, všetky jeho prvky sú načítané. Preto, keď sa na nej umiestni príliš veľa grafiky, rýchlosť sťahovania sa zvyčajne výrazne zníži. Čo, zase, plná nepríjemností pre návštevníkov vášho projektu.
CSS Sprites.
Na hlavnej stránke je tvar sťahovania grafických súborov (pre každý súbor - samostatné tlačidlo). Spočiatku sú zobrazené iba tri tlačidlá na prevzatie. Ak potrebujete viac, kliknite na "Potrebujete viac".
Po zvolení všetkých súborov pre budúce sprite CSS, kliknite na tlačidlo "Možnosti". Nastavenia otvoríte malý panel. Tu môžete nastaviť zarážky medzi prvkami v pixeloch, pridajte rám pre obrázky, zarovnať všetky obrázky v hotovom doprava alebo na hornom okraji, nastavte farbu pozadia v RGB formáte.
Po stlačení tlačidla "Generate" bude priame vytvorenie CSS Sprite. Uvidíte aj malú inštrukciu, aby ste ho mohli použiť, konkrétne CSS kód, ktorý bude musieť byť umiestnený na vašich webových stránkach. V HTML je dokonca príklad. Demontujte, myslím, že nie je problém.
Vizuálne Danove Tools CSS Sprite Generátor je pomerne pekný generátor CSS sprite s mnohými nastaveniami. Môžete napríklad vybrať vertikálny alebo horizontálny typ ikon vkladania vo všeobecnom obraze.
CSS Sprites.
Služba CSS Sprites Service je mimoriadne jednoduchý návrh a nastavenia. Existuje výsledok výsledného formátu obrazu: PNG, JPEG, GIF. Stránka má odkaz na adaptívnu verziu generácie Sprites - responzívne CSS Sprites (aj keď som to nevyskúšal).
CELKOM. V zásade všetky nuansy, ako urobiť CSS Sprites a používať ich. Generátory pomôžu urýchliť proces vytvárania prvkov, ale môžete sa dostať a photoshop. Ak existujú nejaké otázky, napíšte v komentári.
Páčilo sa:
27
Nepáčilo sa mi: 4
Nie je k dispozícii jeden preklad.
sprite
predtým alebo po"predtým""Po""Po"
nahnevaný vták. angry.png. index.html
Utf-8. index.html windows-1251. Štýl.css. nahnevaný vták.
http://spritecow.com
angry.png,
nahnevaný vták.súbor štýlu Štýl.css. imgs /.Mám takto:
Nie je k dispozícii jeden preklad.
CSS Sprites sú grafiku pre vaše webové stránky kombinované do jedného grafického súboru. "Prečo je jeden súbor?" - pýtaš sa. Faktom je, že takýto prístup k ukladaniu obrázkov vám umožňuje zvýšiť výkon webových stránok, ako aj organizované grafické obrázky skladu. Pozrime sa na niektoré z najlepších postupov pre použitie škriatok. Názov Sprites vám môže pripomenúť hru Sprites, Retro Gaming Console a dokonca aj prehliadača hry, ktoré sú tak populárne dnes:
Platí teda na web design, sprite - Toto je len jeden veľký súbor obsahujúci viacero obrázkov pre vaše webové stránky, ukladanie času preberania a prenosu času cez sieť. Keď napríklad Sprite, obsahuje 20-30 obrázkov, môže výrazne uľahčiť zaťaženie na serveri, pretože ak boli tieto obrázky uložené samostatne - server by musel urobiť 20-30 samostatných dotazov na získanie každého takéhoto obrazu. Vďaka Sprite sa na server prichádza iba jedna požiadavka HTTP - na získanie jedného obrázka. Sprite vizuálne si myslí, že nie je celkom "čítanie" pre oko, pretože jeho hlavnou úlohou je zbierať len rôzne "kusy" vášho dizajnu spolu. Napríklad, Sprite môže byť takáto:
Sprites používajú väčšinu moderných stránok a všetci známe VKontakte nie je výnimkou. Napríklad ukladá v rovnakých "kusoch" rozhrania v jednom súbore - konkrétne všetky známe ikony:
Významným momentom používania CSS-Sprites je, že server potrebuje posielať iba jeden grafický súbor obsahujúci všetky vaše obrázky, a nie rôzne jednotlivé obrázky - a cez CSS môžete zobraziť akýkoľvek malý segment z tohto grafického súboru ako pozadie pre položka. Niektorí si myslia, že individuálne obrázky sú načítané rýchlejšie, ale nie. Stiahnutím jedného grafického súboru s množstvom obrázkov posielame iba jednu požiadavku na server a pri načítaní veľkého počtu obrázkov - pošleme viac požiadaviek na server. Kombinácia obrázkov do jedného súboru umožňuje nielen významne znížiť počet požiadaviek HTTP, alea znížiť celkovú veľkosť obrazového súboru.
Dám ďalší príklad Sprite. Takže ukladá grafické prvky Jedna známa západná stránka venovaná dizajnu:
Môžete sa opýtať - keď sa najlepšie pripravíš sprite? Existujú pre to dva rôzne prístupy.
Rôzne prístupy - Vytvoriť Sprite pred a po vytvorení stránky
Pri vytváraní listovej sprite sú dva spoločné prístupy - urobte topredtým alebo povytvorenie vašej stránky. Pred vytvorením stránky môžete umiestniť všetky obrázky do hárku Sprite. To je to, čo nazývame prístup."predtým". Okrem toho môžete vytvoriť všetky obrázky vo forme samostatných súborov, čo ich uľahčuje úpravy. Akonáhle je stránka postavená, a všetky obrázky sú pripravené, môžete rýchlo a jednoducho vytvoriť sprite list, alebo manuálne, alebo pomocou jedného z niekoľkých nástrojov. To zavoláme prístup"Po". AK SPRIROVÉ LISTY PRE VÁS V NOVINKE ALEBO NOVINKACH NA WEBOVEJ DIZUME, AKO PRÍSTUPUJETE VIAC"Po". Existuje mnoho verejných služieb, služieb a programov na vytvorenie Spritov, z ktorých väčšina sú distribuované a dostupné zadarmo.
Máme obrázky vpravo organizované
Pri vytváraní Sprite vo Photoshope je žiaduce ihneď všetky obrázky sú organizované a v určitom konkrétnom zvolenom sekvencii sa rozhodnete pracovať s nimi ľahko a jednoduchým. Snažte sa vždy zaokrúhliť miesto pod každým obrázkom Sprite na najbližších 10 pixelov, alebo opustiť viac priestoru okolo nich, ak sú všetky rovnaké. Pokiaľ ide o písanie štýlu CSS, nemusíte zaznamenať merania súradníc a budete menej naklonení, aby ste zabudli na čísla so súradnicami požadovaných obrázkov. Tu je príklad úspešného umiestnenia rôznych obrázkov v jednom práve:
Z teórie - do praxe! Vytvorte animovaný vták z Angry Birds s Sprite
Takže sme sa zoznámili s konceptom Spitu v webovom dizajne, ale teória bez praktizovania nie je nič. Preto teraz vytvoríme naše prvé sprite a naučiť sa, ako urobiť jednoduchú animáciu na stránke HTML. Náš príklad bude založený na charaktere z hry Angry Birds - to je vtipný červený vták. Ak chcete začať, pripravíme obraz-sprite vo formáte .png obsahujúci 4 fázy animácie vtákov:
Vytvorte katalóg niekde na disku nahnevaný vták.- Budeme umiestniť súbory nášho príkladu. Udržujte Sprite s vtákmi v tomto adresári a zavolajte súbor angry.png. Ďalší krok - vytvorte súbor s menom v tom istom adresári index.html- Bude to naša testovaná stránka s animáciou. Ďalej otvorte tento súbor v editore a umiestnite tam nasledujúci kód:
Budem trochu vysvetliť, že sme teraz urobili. Najprv sme sa pýtali na náš dokument kódujúci HTML Utf-8.A preto by ste mali zachovať naše index.htmlv tomto kódovaní. Môžete nastaviť inú napríklad windows-1251.- Pre našu úlohu nie je zásadne. Ďalej sme sa pripojili k štýlu súborov dokumentu. Štýl.css. (Ešte nie je v našom katalógu nahnevaný vták., Vytvorte ho o niečo neskôr). Spýtali sme sa aj odkaz na externý skript a pripojili knižnicu JQuery - pomocou JQuery, budeme vykonávať dynamickú zmenu obrázkov nášho vtáka a zmeniť svoju "fázu" z sprite. Tiež sme pripravili vnútorný javascript blok, kde dať kód, ktorý robí vtáčú animáciu. No, konečne, hlavné telo dokumentu obsahuje jediný hypertextový odkaz vo vnútri, ktorý je DIV jednotka a jeho ID je nastavené ako Birdimage a predvolená trieda -bird-spanie trieda. To znamená, že náš vták "spí" pri otváraní stránky - to zodpovedá hornému dolný obraz vo vnútri sprite - kde sú oči zatvorené. Teraz je čas "znížiť" naše sprite, t.j. Vyberte od neho samostatné obrázky.
Scroll Sprite pomocou služby Spritecow.com
Úlohou "rezanie" sprite je pomerne časovo náročné - vyžaduje sa, aby sa nechala mýliť sa s súradnicami, ktoré definujú každý obraz v spreja. Našťastie, dnes sú služby, ktoré úplne odstrániť túto bolesť hlavy od dizajnéra a vestistra. Používam na rezanie a odporúčam, aby ste seriál http://spritecow.com. Podstatou služby je jednoduchá a veľmi pohodlná - prideľujeme každý obrázok vtáka a Sprecow nám dáva pripravený kód CSS s súradnicami. Všetko, čo budeme musieť urobiť, je len nastaviť 4 štýly pre každú fázu vtáka! Chystáme sa na stránku, vidíme 2 tlačidlá - "Otvoriť obrázok" a "Zobraziť príklad". Potrebujeme prvé tlačidlo, kliknite naň:
V dialógu sa otvoril - vyberte si Sprite súbor angry.png,potom vidíme, ako naše sprite na stránke. Ďalej musíme určiť farbu pozadia, pre to sme klikne na panel s nástrojmi "Pick Background" a ukážte na bielu oblasť našej sprite - to vám umožní správne znížiť každú fázu hydiny:
Vyberte prvý obrázok a automaticky sa dostanete na IT CSS kód:
Teraz je čas vytvoriť v našom katalógu nahnevaný vták.súbor štýlu Štýl.css.. Vložte tam 4 generované kusy CSS kódu vložené tam, len namiesto štandardnej triedy.SPrite, sprevádzanie, ktoré nám ponúkli, zavolá naše štýly jasnejšie. Tiež, pretože obraz Sprite je uložený priamo v koreňovom katalógu, odstrániť z majetku zbytočnej položky TheBackground - imgs /.Mám takto:
/ * "Normálny" vták. Ľavý vrchný obrázok v spreja * / .bird-normálne (pozadie: URL ("Angry.png") NO-REPEAT -12PX -16PX; Šírka: 97PX; Výška: 94px;) / * "Šťastný" vták. Správny vrchný obrázok v spreja * / .bird-happy (pozadie: URL ("Angry.png") NO-REPEAT -118PX -17PX; Šírka: 97PX; Výška: 94px;) / * "Spiace" vták. Vľavo dolný obraz v spreja * / .bird-spanie (pozadie: adresa URL ("Angry.png") NO-REPEAT -12PX -120PX; Šírka: 97px; Výška: 94px;) / * "Angry" Bird. Pravá spodná časť v postreku * / .bird-Angry (pozadie: URL ("Angry.png") NO-REPEAT -118PX -120PX; šírka: 97px; výška: 94px;)
Posledný krok píše kód JQuery, ktorý vytvorí animáciu.
Teraz, keď sme úspešne znížili Sprite a umiestnili 4 štýly pre každý obrázok do nášho súboru. Štýl.css.Stále musíme napísať kód na jquery, ktorý pridá animáciu, keď sa vznášate na náš hypertextový odkaz a kliknutím na odkaz. Ako si spomíname v predvolenom nastavení, máme triedu triedy, t.j. Náš červený vták bude "spať" pri otváraní dokumentu :)
Všetka animácia budú postavené na 3 metódy jQuery:
- hover - Kurzorový sprievodca na referenčnom a "starostlivosti" kurzora s odkazom. Keď prinesieme kurzor, vták sa "prebudí" - t.j. trieda bude bebird-normálna
- mUSOUDOWN-handler stlačením ľavého tlačidla myši na odkaz. Zároveň sa vták stane "šťastným" - t.j. Div Block bude priradený CROUPBIRD-Happy
- myši - ľavý manipulátor. Pri uvoľnení vtáka sa stane "zlo" - t.j. Div Block je priradený klasifikovaný
Takže vložte nasledujúci kód do miesta, ktoré sme pripravili v internej jednotke JavaScriptu umiestneného na stránke:
$ (DOCUMKCE) .READY (funkcia () () (// tu bude kód na jQuery, vytvára animáciu $ ("# # BirdImage"). Hover (funkcia () () ($) .REMoveclass ("Bird-Spanie"); $ (toto) .Removeclass ("Bird-Angry"), $ (toto) .Removeclass ("Bird-Happy"); $ (THERN) .Addclass ("Bird-Normal") Toto) .Removeclass ("Bird-Normal"); $ (toto) .Removeclass ("Bird-Angry"), $ (toto) .Removeclass ("Bird-Happy"); Spanie ");); $ (" # # birdimage "). Mousedown (Funkcia () (" Bird-Spanie "), $ (THIS) .REMOVECLASS (" Bird-Normal "); Bird-Angry "); $ (this) .addclass (" Bird-Happy ");). "Bird-Normal"), $ (toto) .Removeclass ("Bird-Happy");
Pripravený! Skúšobná animácia
To je to! Náš vták je pripravený a urobil život na vašu animáciu na stránku! :) Môžete vidieť demo. Stiahnite si archív s príkladom - spodnej časti článku.