Jednoduchá tvorba bannerov na css3. Animovaný banner CSS3. CSS3 navigácia s animovanými prechodmi

Aby sme pochopili štruktúru nášho označenia, zamerajme sa na chvíľu na loď:

>

>
>
>
Teraz sa pozrime na prvý banner na stránke s ukážkou. Na lodi sa odohrávajú tri samostatné animácie:
• Animácia - keď sa čln šmýka z ľavej strany. Platí to priamo pre neusporiadaný zoznam (skupina prvkov lode).
• Animácia - ktorá dodáva lodi kolísavý efekt, simuluje loď plávajúcu na vode. Platí to priamo pre prvky zoznamu (loď).
• Animácia – ktorá skrýva otáznik. To platí pre div (otáznik).
Ak netrpíte morskou chorobou, pozrite si ešte raz demo stránku. Uvidíte, že animácia aplikovaná na položku zoznamu (loď), ktorá spôsobí, že sa loď zdvihne, ovplyvňuje aj DIV v nej (s otáznikom). Okrem toho animácia "zasunutia", ktorá sa použije na neusporiadaný zoznam (skupinu), ovplyvňuje aj prvok zoznamu a prvok DIV v ňom (loď a otáznik). To nás privádza k dôležitým postrehom:
Detské prvky dedia od svojich rodičov okrem vlastnej animácie animáciu. Tento poznatok pribudol do nášho arzenálu, no počet detí/rodičov pri tvorbe animácie vás (a procesor na notebooku vašej starej mamy) ohúri!
css
Než sa dostaneme k skutočne skvelým veciam a začneme vytvárať animácie, musíme ešte upraviť štýl prehliadačov, ktoré uviazli v 18. storočí.
Záložné štýly pre staršie prehliadače

Jednoducho vytvoríme záložné štýly, ako keby animácia CSS neexistovala (pri predstave, že animácia CSS neexistuje, sa každý dospelý nielen rozplače, ale vedľa mňa bude visieť :)). Inými slovami, ak sa naša animácia neprehrá, banner by mal stále vyzerať slušne. Takto, keď si niekto prezerá banner pomocou starého prehliadača, namiesto prázdneho miesta uvidí normálny, statický banner.
Napríklad: ak niekto používa CSS takto, nastanú problémy:
/* ZLÝM SMEROM! */

0 % ( nepriehľadnosť: 0 ; )
100 % ( nepriehľadnosť: 1 ; )
}
Div (
nepriehľadnosť: 0 /* Tento blok je predvolene skrytý!*/

}
Ak prehliadač používateľa nepodporuje animáciu, banner zostane pre používateľa neviditeľný. A potom zákazník rozbije dvere v kancelárii predajcu – s motorovou pílou v rukách – a bude od neho požadovať vysvetlenie, prečo jeho výrobok nepredali! A ak nepochopia, že prehliadač môže byť taký nešťastný, ich život sa strašne skončí a ich posledné slová budú nadávať na Internet Explorer... :)
Ale nebojte sa, poskytneme rozšírenú podporu prehliadača:
/* SPRÁVNA CESTA */
@keyframe our-fade-in-animation (
0 % ( nepriehľadnosť: 0 ; )
100 % ( nepriehľadnosť: 1 ; )
}
Div (
nepriehľadnosť: 1 /* tento div bude predvolene viditeľný */
animácia: our-fade-in-animation 1s 1 ;
}
Ako vidíte, DIV sa bude stále zobrazovať, aj keď sa animácia neprehrá. Ak je možné animáciu prehrať, potom sa DIV okamžite skryje a animácia sa prehrá až do konca.
Teraz, keď už vieme, ako zabezpečiť, aby naše animované bannery podporovali staršie prehliadače, prejdime k základným CSS.
Treba mať na pamäti tri kľúčové veci:
• Keďže tieto reklamy môžu byť použité na rôznych webových stránkach, všetky naše štýly CSS veľmi špecifikujeme. Každý selektor začneme deklarovať s ID: #ad-1. To zabráni tomu, aby naše štýly bannerov boli narušené existujúcimi štýlmi a prvkami.
• Budeme cielene ignorovať funkciu oneskorenia animácie pri vytváraní našej animácie. Ak by sme funkciu oneskorenia animácie, ako aj dizajn našich prvkov použili správnym spôsobom (predvolene viditeľné), všetko by bolo viditeľné na obrazovke skôr, ako by sa animácia konečne prehrala. Preto sa animácia spustí okamžite, čo nám umožňuje skryť prvky z obrazovky, kým ich nebudeme potrebovať. Budeme simulovať oneskorenie animácie zvýšením trvania a manuálnym nastavením kľúčových snímok. Príklady toho uvidíte, keď začneme vytvárať animácie.
• Ak je to možné, použite jednu animáciu pre viacero prvkov. Týmto spôsobom môžeme ušetriť veľa času a znížiť nafúknutie kódu. Úpravou trvania a prechodov môžete v tej istej animácii vytvoriť niekoľko rôznych efektov.
Začneme teda vytvárať náš reklamný banner. Uistime sa, že má relatívnu polohu (pozícia: relatívna), aby sa prvky vo vnútri dali správne umiestniť. Musíme sa tiež uistiť, že vlastnosť overflow: hidden je nastavená tak, aby skryla všetko ostatné:
#ad-1 (
šírka: 720px
výška: 300px
plavák : vľavo ;
okraj : 40px auto 0 ;
background-image : url (../images/ad-1/background.png ) ;
background-position : center ;
background-repeat : no-repeat ;
prepad: skrytý
poloha : relatívna ;
box-shadow: 0px 0px 6px #000 ;
}
#ad-1 #content(
šírka: 325 pixelov
plavák : pravý ;
okraj : 40px ;
text-align : center ;
z-index: 4;
poloha : relatívna ;
prepad: viditeľný
}
#ad-1 h2 (
font-family : "Alfa Slab One" , kurzíva ;
farba : #137dd5 ;
font-size : 50px ;
line-height : 50px ;

animácia: oneskorené zoslabovanie animácie 7 s 1 uvoľnenie nábehu; /* H2 sa stratí so simulovaným oneskorením animácie */
}
#ad-1 h3 (

farba : #202224 ;
font-size : 31px ;
line-height : 31px ;
text-shadow : 0px 0px 4px #fff ;
animácia: oneskorené zoslabovanie animácie 10 s 1 uvoľnenie nábehu; /* H3 sa stratí so simulovaným oneskorením animácie */
}
#ad-1 form (
okraj : 30px 0 0 6px ;
poloha : relatívna ;
animácia: form-animation 12s 1 easy-in-out; /* Tento kód presúva náš e-mailový formulár */
}
#ad-1 #e-mail (
šírka: 158px;
výška: 48px;
plavák : vľavo ;
výplň: 020px
font-size : 16px ;
font-family : "Lucida Grande" , bezpätkové ;
farba : #fff ;
text-shadow : 1px 1px 0px #a2917d ;
border-top-left-radius: 5px ;
border-bottom-left-radius: 5px ;
okraj : 1px plný #a2917d ;
obrys : žiadny ;
box-shadow: -1px -1px 1px #fff ;
farba pozadia : #c7b29b ;
background-image : linear-gradient(bottom , rgb (216 , 201 , 185 ) 0% , rgb (199 , 178 , 155 ) 100% );
}
#ad-1 #email :focus (
background-image : linear-gradient(bottom , rgb (199 , 178 , 155 ) 0% , rgb (199 , 178 , 155 ) 100% );
}
#ad-1 #submit (
výška: 50px
plavák : vľavo ;
kurzor : ukazovateľ ;
výplň: 020px
font-size : 20px ;
font-family : "Boogaloo" , kurzíva ;
farba : #137dd5 ;
text-shadow : 1px 1px 0px #fff ;
border-top-right-radius: 5px ;
border-bottom-right-radius: 5px ;
okraj : 1px plný #bcc0c4 ;
ľavý okraj: žiadne
farba pozadia : #fff ;
background-image : linear-gradient(bottom , rgb (245 , 247 , 249 ) 0% , rgb (255 , 255 , 255 ) 100% );
}
#ad-1 #submit :hover (
background-image : linear-gradient(bottom , rgb (255 , 255 , 255 ) 0% , rgb (255 , 255 , 255 ) 100% );
}
Teraz naštylizujeme vodu a vyvoláme príslušnú animáciu:
#ad-1 ul #voda (
/* Ak by sme chceli pridať ďalšiu animáciu pre vodu (napríklad pohyb vodorovne), môžeme to urobiť tu */
}
#ad-1 li#water-back (
šírka: 1200px
výška: 84px;
background-image : url (../images/ad-1/water-back.png ) ;

z-index: 1;
poloha: absolútna;
dole: 10px
vľavo: -20px
animácia: voda-späť-animácia 3s nekonečné uvoľnenie-in-out; /* Efekt skákania vody */
}
#ad-1 li#water-front (
šírka: 1200px
výška: 158px;
obrázok na pozadí: url ( ../images/ad-1/waterfront.png) ;
background-repeat : repeat-x ;
z-index: 3;
poloha: absolútna;
dole : -70px ;
vľavo: -30px
animácia: vodná-predná-animácia 2s nekonečné uvoľnenie-in-out; /* Ďalší efekt skákania vody – je trochu iný. Spravíme túto animáciu trochu rýchlejšie, aby sme poskytli určitú perspektívu. */
}
Teraz poďme vytvoriť štýly pre loď a všetky jej prvky. Opäť vyvoláme príslušnú animáciu:
#ad-1 ul#boat (
šírka: 249px;
výška: 215px
z-index: 2;
poloha: absolútna;
dole: 25px
vľavo: 20px
prepad: viditeľný
animácia: čln-v-animácii 3s 1 uvoľnenie; /* Presunúť skupinu na začiatok */
}
#ad-1 ul#boat li (
šírka: 249px;
výška: 215px
background-image : url (../images/ad-1/boat.png ) ;
poloha: absolútna;
dole: 0px
vľavo: 0px
prepad: viditeľný
animácia: loď-animácia 2s nekonečné uvoľnenie-in-out; /* Imitácia pohupovania sa loďky na vode - podobná animácia sa už používa aj pri samotnej vode. */
}
#ad-1 #otáznik (
šírka: 24px
výška: 50px
obrázok na pozadí: url ( ../images/ad-1/question-mark.png) ;
poloha: absolútna;
vpravo: 34px;
hore : -30px ;
animácia: oneskorené zoslabovanie animácie 4s 1 uvoľnenie nábehu; /* Skryť otáznik */
}
Nakoniec vytvoríme štýly pre skupinu oblakov a pre jeden oblak. Spustíme tiež pomerne šikovnú animáciu, ktorá im poskytne efekt nepretržitého posúvania. Tu je ukážka toho, čo sa stane:

Toto sú štýly:
#ad-1 #mraky (
poloha: absolútna;
hore: 0px;
z-index: 0
animácia: cloud-animation 30s infinite linear; /* Posúvanie oblakov doľava, nekonečne veľa krát */
}
#ad-1 #cloud-group-1 (
šírka: 720px
poloha: absolútna;
vľavo: 0px
}
#ad-1 #cloud-group-2 (
šírka: 720px
poloha: absolútna;
vľavo: 720px;
}
#ad-1 .cloud-1 (
šírka: 172px
výška : 121px ;
background-image : url (../images/ad-1 /cloud-1 .png) ;
poloha: absolútna;
hore : 10px ;
vľavo: 40px;
}
#ad-1 .cloud-2 (
šírka : 121px ;
výška: 75px
background-image : url (../images/ad-1 /cloud-2 .png) ;
poloha: absolútna;
hore : -25px ;
vľavo: 300 pixelov
}
#ad-1 .cloud-3 (
šírka: 132px;
výška: 105px
background-image : url (../images/ad-1 /cloud-3 .png) ;
poloha: absolútna;
hore : -5px ;
vľavo: 530px;
}
Ufff! Bolo tu veľa CSS kódu. Ale najzaujímavejšie je ďalej!
Animácia

Pamätajte: Až do tohto bodu neexistovala žiadna skutočná animácia. Ak by ste si banner pozreli teraz, videli by ste niečo, čo by zobrazil aj starý prehliadač – statickú reklamu. ODterazvytvoríme vlastne animáciu, ktorú sme už volali v našom CSS kóde.
Teraz, keď sa náš banner dobre zobrazuje, poďme okoreniť túto statickú reklamu! Poďme priamo na kód - v komentároch vám poviem, čo sa stane:
Záver
V priebehu tohto tutoriálu sme sa naučili kľúčové body pre vytváranie animácií s podporou starších prehliadačov:
1. Podradené prvky zdedia okrem svojej vlastnej animácie animáciu svojho rodiča. Môžeme to použiť na vytváranie zložitejších animácií.
2. Pre naše štýly reklám musíme použiť veľmi špecifické selektory, aby naše reklamy neboli prepísané inými štýlmi stránok.
3. Potrebujeme naštylizovať prvky tak, aby v prípade, že sa naša animácia nepodarí prehrať, reklama musí stále vyzerať slušne.
4. Vždy, keď je to možné, použite rovnakú animáciu pre viacero prvkov – šetríte čas a predchádzate nafúknutiu kódu.
5. O Internet Exploreri často hovoríme ako o „prehliadači z 18. storočia“, pričom trasieme päsťou v znechutení a hneve. :)
Veľa šťastia pri experimentoch s CSS.
Dobrý deň, úloha je teda nasledovná: „Vytvorte adaptívny HTML banner, ktorý sa prispôsobí rôznym veľkostiam obrazovky, bude mať počítadlo zostávajúceho času a tlačidlo zatvorenia a toto všetko by malo počítať aj kliknutia, aby sa zbierali štatistiky o kliknutiach na TT vodič.”
Po prvé, poďme zistiť, aké sú najobľúbenejšie formáty pri vytváraní takýchto bannerov:
Vo všeobecnosti je týchto bannerov veľa, so všetkými technickými požiadavkami a formátmi sa môžete zoznámiť tu: kliknite , ale my použijeme len niekoľko, pretože. ostatné už nie sú relevantné, alebo sa takmer opakujú tieto:
1. FullScreen bannery - bannery, ktoré ste mohli vidieť v metre alebo na wifi stránke, tieto bannery sa otvárajú na celú obrazovku, majú počítadlo a tlačidlo na zatvorenie. Na vytvorenie takýchto bannerov si jednoducho pripravíme statický obrázok alebo jednoduchú gif animáciu (nie viac ako 600 kB) a potom všetko napíšeme do HTML.

   Banner na celú obrazovku

2. FullWidth bannery sú už zaujímavejšie, ale v skutočnosti sú to len obyčajné HTML5 bannery, ktoré sa roztiahnu len do 100% šírky obrazovky, ale majú pevnú výšku. Takéto bannery často využívajú animáciu a sú už vytvorené v programoch ako napr webový dizajnér google, Adobe Edge Animate , Adobe Animate CC . Osobne aktívne používam Edge Animate, je pohodlnejší, rýchlejší a má možnosť rýchleho nahrávania do HTML5. Pri vytváraní takýchto bannerov sa najskôr vytvorí storyboard s možnosťami, ako bude tento banner vyzerať na rôznych veľkostiach obrazovky, celé to vyzerá asi takto:

   

   Nápisový panel so 100 % šírkou

3. Banner s pevnou veľkosťou alebo statický - no, je to celkom jednoduché. Tu sa vytvorí jednoduchá kreatíva alebo storyboard a zostáva už len napísať kód pre počet kliknutí. Na tvorbu takýchto bannerov často používam Adobe Photoshop alebo Edge Animate – ak ide o animáciu. Nikdy tu nepoužívajte GIF! Nikdy nebudete môcť nahrať animáciu gif pod 600 kB a ak je animácia väčšia, nebude preskočená. Bežný HTML banner nedosiahne váhu 200KB, čiže tu môžete tvoriť naplno.

Scenár banneru s pevnou veľkosťou
Sprievodca vytvorením bannera na celú obrazovku podľa všetkých pravidiel
Vytvorenie takéhoto bannera znamená, že jeho veľkosť sa zmení, keď sa zmení veľkosť obrazovky, čo znamená, že zaberie celú svoju plochu, asi takto:
To znamená, že obraz by mal vyzerať rovnako dobre na všetkých zariadeniach, z toho vyplýva záver, že by mal byť dostatočne dobrá kvalita a veľkosť sa blíži námestie(Neexistujú žiadne pevné veľkosti, všetko je tu celkom lojálne). Momentálne sa zameriavame na mobilné zariadenia (mobily) a tablety (tablety), takže si vezmeme obdĺžnik na zobrazenie na výšku (na výšku). Ideme do Photoshopu a vytvoríme dokument požadovanej veľkosti, v tomto prípade to je 536 x 714:

Zdroj GIF na vytvorenie bannera na celú obrazovku
Gif som vytvoril z dvoch rámikov, má váhu 242KB, vždy by sme mali mať váhu do 600KB, toto si zapamätajte. Teraz to musíme zmeniť na skutočný HTML banner. Otvoríme návod na tvorbu FullScreen bannerov, preberieme z neho technické požiadavky a zatvoríme ho, je napísaný veľmi nemotorne. Zabudnite na Flash, zomrel hrdinskou smrťou, máme iba HTML5, takže potrebujeme technické požiadavky na vytváranie bannerov s kódom Ajax.
Neexistujú žiadne obmedzenia rozloženia, tu si môžeme robiť, čo chceme, hlavná vec je, že sú prítomné hlavné atribúty, a to: Z bannera bolo prečítané kliknutie, bolo tam počítadlo a krížik na zatvorenie. Na kódovanie používam freeware Sublime Text.
Otvorte súbor HTML z mojej šablóny a pozrite si:

Štandardný kód bannera na celú obrazovku



tlačidlo zavrieť
Ako sa z banneru číta samotné kliknutie? A prečo sme nepridali žiadne odkazy na stránky, na ktoré má banner viesť? Takže ... Systém Adriver umožňuje registrovať odkazy na prechod na stránku, po načítaní bannerov do systému sa ukáže, že v našom zdroji registrujeme len premennú, ktorá sa nahradí pri načítaní do samotného systému, nie je dlhšia naša práca. V tomto prípade máme kliknutie na celý kontajner, v ktorom sa náš banner nachádza, vo všeobecnosti na všetko, čo umiestnime
máme banner a kliknutia sa čítajú z tohto. Pri iných banneroch, iných technických požiadavkách a tam sa klikanie číta inak, teraz sa pozeráme na konkrétny príklad.
Nádoba s transparentom
V ďalších lekciách vám poviem, ako vytvoriť banner na 100% šírky obrazovky s animáciou a ako vytvoriť a pripraviť rozloženie pre rozloženie webu podľa všetkých pravidiel.
Súbory lekcií:
1. Hotové bannery na celú obrazovku: kliknite
Ďakujem za tvoju pozornosť.
Nepochybne jeden z najjasnejších trendy 2012 je vývoj na CCS3, HTML5. Dnes ponúkame veľký a veľmi užitočný prehľad príkladov " 20+: Kreatívne a užitočné návody CSS3″ ponúkané na Špinavý chlapec. Všetky príklady sú vyrobené v čisté bez JavaScriptu, v prezentovaných lekciách je na stiahnutie demo a hotové CSS3 súbory.
Sme si istí, že tieto triky a techniky budú užitočné pre vývojárov webu!
css3 lekcie :
1. CSS3 fotogalérie, slidery, obrazové efekty
1.1.Posuvník CSS3
Je ťažké uveriť, ale tento posúvač s rôznymi efektmi je vyrobený výlučne na CSS3, veľmi pôsobivý.
1.2. Pozadie webovej stránky na celú obrazovku s efektom posúvača CSS3
Webdizajnéri už dlho experimentujú s rôznymi pozadiami pre webovú stránku, ale zatiaľ čistý CSS mohol urobiť veľmi málo, musel použiť JS. CSS3 teraz umožňuje narábať s pozadím vašej stránky podľa vlastného uváženia – môžete mať jedno pozadie s veľkou kvalitnou fotografiou, môžete meniť viacero pozadí s rôznymi efektmi a so škálovateľnosťou pozadia v závislosti od parametrov obrazovky. Vo všeobecnosti úžasná príležitosť pre kreatívne stránky.
1.3. Lightbox v CSS3
V tomto návode sa môžete naučiť, ako vytvoriť Lightbox (Lightbox) s rôznymi efektmi na čistý CSS.
1.4. Vlastnosti obrázka CSS3
Tento tutoriál demonštruje nové funkcie CSS3 pre vlastnosti obrázkov, ako sú zaoblené rohy, tiene a ďalšie efekty.
1.5. Animovaný banner CSS3
1.6.Nakladacia lišta CSS3
1.7. 3D stuha s CSS3

Pozrite si ukážku alebo si stiahnite súbory kódu CSS3 →
2. CSS3 menu, navigácia a tlačidlá
2.1. Ponuka Apple.com v CSS3
Návod na vytvorenie slávneho Apple.com menu v CSS3.
2.2. Animované horizontálne menu CSS3
Jednoduchý tutoriál, ktorý ukazuje, ako vytvoriť animované menu CSS3 s rôznymi efektmi.
2.3. Animované vertikálne menu v CSS3
2.4. Animované tlačidlá CSS3
Skvelý tutoriál so 7 príkladmi animovaných kreatívnych tlačidiel.
2.5. Kreatívne animované menu s obrázkami CSS3
V tejto lekcii vám z 10 prezentovaných príkladov vybehnú oči. Takéto komplexné kreatívne menu sa kedysi vytvárali výhradne s pomocou JS. Pôsobivé!
2.6. Efekt kruhovej navigácie s CSS3
Nezvyčajný efekt pri prejdení myšou nad vybranú navigačnú položku v podobe kruhu s obrázkom. Berieme na vedomie!
2.7. Rozbaľovacia ponuka v CSS3
Návod na implementáciu jednoduchej rozbaľovacej ponuky s podúrovňami v CSS3.
2.8. CSS3 navigácia s animovanými prechodmi
3. Rôzne účinky na CSS3
3.1. Animovaný popis CSS3 bez jQuery

Urobme si reklamný banner pomocou CSS3. V súčasnosti plne podporuje iba animácie CSS3 Prehliadače Firefox a Webkit. Stačí však, aby banner fungoval aj v iných prehliadačoch. Nečakajte však všade veľký výkon (najmä v IE 7 a starších) pri experimentovaní s najnovšími technikami CSS.
Poznámka: Aby sa ušetrilo miesto na stránke, boli vynechané všetky predpony dodávateľa prehliadača. Pozrite si zdrojový kód.
HTML značky
Najprv sa pozrime na štruktúru banneru v HTML. V tomto bode si musíme predstaviť, ako bude animácia fungovať:
Stratili ste?
Relax - pomôžeme.

Pre hlbšie pochopenie štruktúry značiek sa zamerajme na loď:
S loďou sa vyskytujú tri animácie:
Pošmyknutie člna vľavo. Platí pre neusporiadaný zoznam (skupinu).

Simulácia hojdania člna na vode. Aplikuje sa na položku zoznamu (loď).

Vzhľad otáznika. Aplikuje sa na prvok div (otáznik).
Ak sa pozriete na ukážkovú stránku, môžete vidieť, že animácia položky zoznamu (loď) ovplyvňuje aj prvok div v nej (otáznik). Animácia "sklzu" pre neusporiadaný zoznam ovplyvňuje položku zoznamu (loď a otáznik).
Preto sa dá usúdiť, že podradené prvky dostávajú okrem svojich vlastných akcií aj rodičovské animácie. Teraz zostáva len vymenovať štruktúry rodič/dieťa.
css
Než začneme vytvárať animácie, musíme zabezpečiť spätnú kompatibilitu so staršími prehliadačmi.
spätná kompatibilita
Spätnú kompatibilitu dosiahneme jednoduchým naštylovaním značky, ako keby animácie CSS vôbec neexistovali. Ak si niekto prezerá stránku v starom prehliadači, zobrazí sa mu normálny statický obrázok, nie prázdne biele miesto.
Napríklad: mám použiť CSS? ako ten nižšie, potom budú problémy:
/* NIE SPRÁVNE! */ @keyframe our-fade-in-animation ( 0% (opacity:0;) 100% (opacity:1;) ) div ( opacity: 0; /* Tento prvok div je predvolene skrytý - hops! */ animácia: naša -fade-in-animation 1s 1; )
Ak prehliadač nepodporuje animáciu, prvok div zostane pre používateľa neviditeľný.
Takto zabezpečujeme spätnú kompatibilitu so staršími prehliadačmi:
/* TRUE */ @keyframe our-fade-in-animation ( 0% (opacity:0;) 100% (opacity:1;) ) div ( opacity: 1; /* Tento div je predvolene viditeľný */ animácia: naša -fade-in-animation 1s 1; )
Teraz sa prvok div vykreslí, aj keď sa animácia nespustí. A v moderné prehliadače Div sa počas animácie najskôr skryje.
Základ
Teraz vieme, ako zabezpečiť spätnú kompatibilitu (čo pomôže vyhnúť sa problémom pri práci so skutočnými projektmi). Je čas vytvoriť základ nášho CSS kódu.
Musíte si zapamätať 3 body:
Keďže banner sa bude používať na rôznych stránkach, všetky naše selektory CSS ozvláštnime. Všetky budú začínať #ad-1. Preto sa pokúsime vyhnúť prekrývaniu nášho kódu a kódu stránky.

Zámerne ignorujeme oneskorenie animácie v nastaveniach. Ak použijete oneskorenie animácie pri nastavovaní štýlov s predvolenou viditeľnosťou prvkov, štruktúra bannera sa naruší náhlym zmiznutím alebo objavením sa častí obrázka po dokončení animácie. Oneskorenie animácie je simulované trvaním a nastavením snímky.

Keď je to možné použite jednu animáciu pre niekoľko prvkov. Tým šetríme čas a zmenšujeme veľkosť kódu.
Takže vytvárame základ pre náš banner. Nastavme ho na relatívne umiestnenie, aby sa vnútorné prvky dali správne umiestniť. Skryje tiež všetko, čo presahuje rozsah prvku:
#ad-1 ( šírka: 720px; výška: 300px; plávajúci: vľavo; okraj: 40px automaticky 0; obrázok na pozadí: url(../images/ad-1/background.png); poloha na pozadí: stred; pozadie -repeat: no-repeat; overflow: skryté; position: relatívne; box-shadow: 0px 0px 6px #000; )
Potom nastavíme štýly pre textové a vstupné polia. Nazývame príslušné animácie. Musíte sa tiež uistiť, že obsah má najvyšší z-index pre pohyblivé časti, aby sa neprekrývali:
#ad-1 #content ( šírka: 325px; float: right; margin: 40px; text-align: center; z-index: 4; position: relatívne; overflow: viditeľné; ) #ad-1 h2 ( font-family: "Alfa Slab One", kurzíva; farba: #137dd5; veľkosť písma: 50px; výška riadku: 50px; tieň textu: 0px 0px 4px #fff; animácia: oneskorené vyblednutie-animácia 7s 1 uvoľnenie-v-out; /* Zobrazí sa h2 s falošným oneskorením */ ) #ad-1 h3 ( font-family: "Boogaloo", kurzíva; farba: #202224; font-size: 31px; line-height: 31px; text-shadow: 0px 0px 4px #fff; animácia: oneskorené zoslabnutie-animácia 10 s 1 uvoľnenie; /* Zobrazí sa h3 so simulovaným oneskorením */ ) #ad-1 form ( margin: 30px 0 0 6px; position: relatívna; animácia: form-animation 12s 1 easy-in-out; /* Vysuňte formulár na zadanie e-mailovej adresy so simulovaným oneskorením */ ) #ad-1 #email (šírka: 158px; výška: 48px; float: left; padding: 0 20px; font-size: 16px; font-family: "Lucida Grande", bezpätkové; farba: #fff; text-shadow: 1px 1px 0px #a2917d; border-top-left-radius: 5px; borde r-bottom-left-radius: 5px; border:1px solid #a2917d; obrys: žiadny; box-shadow: -1px -1px 1px #fff; farba pozadia: #c7b29b; background-image: linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%); ) #ad-1 #email:focus ( background-image: linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%); ) #ad-1 #submit ( height: 50px; float: left ; kurzor: ukazovateľ; padding: 0 20px; veľkosť-písma: 20px; rodina fontov: "Boogaloo", kurzíva; farba: #137dd5; tieň textu: 1px 1px 0px #fff; border-top-right-radius: 5px ; border-bottom-right-radius: 5px; border:1px solid #bcc0c4; border-left: none; background-color: #fff; background-image: linear-gradient(bottom, rgb(245,247,249) 0%, rgb( 255,255,255) 100 %); ) #ad-1 #submit:hover (obrázok na pozadí: lineárny-gradient(dole, rgb(255,255,255) 0 %, rgb(255,255,255) 100 %); )
Teraz upravme vodu a zavolajte príslušnú animáciu:
#ad-1 ul#water( /* Ak potrebujete ďalšiu vodnú animáciu, môžete ju pridať sem */ ) #ad-1 li#water-back ( šírka: 1200px; výška: 84px; obrázok na pozadí: url(. . /images/ad-1/water-back.png); background-repeat: repeat-x; z-index: 1; position: absolute; bottom: 10px; left: -20px; animation: water-back-animation 3s nekonečný easy-in-out; /* Imitácia špliechajúcich vĺn */ ) #ad-1 li#water-front ( šírka: 1200px; výška: 158px; background-image: url(../images/ad-1/water -front .png); background-repeat: repeat-x; z-index: 3; position: absolute; bottom: -70px; left:-30px; animation: water-front-animation 2s infinite easy-in-out; * Ostatné animácie striekajúcich vĺn pobežia o niečo rýchlejšie, aby sa vytvoril efekt perspektívy. */ )
Nastavte štýly pre loď a jej prvky. Vhodné animácie tiež nazývame:
#ad-1 ul#boat ( šírka: 249px; výška: 215px; z-index: 2; pozícia: absolútna; spodok: 25px; vľavo: 20px; pretečenie: viditeľné; animácia: čln v animácii 3 s 1 uvoľnenie ; /* Zasunie skupinu pri spustení reklamy */ ) #ad-1 ul#boat li ( šírka: 249px; výška: 215px; obrázok na pozadí: url(../images/ad-1/boat.png); pozícia: absolútna; dole: 0px; vľavo: 0px; pretečenie: viditeľné; animácia: animácia člna 2s nekonečné uvoľnenie von; /* Simulácia pohupovania sa člna na vode – podobne ako animácia, ktorá sa už používa na samotnej vode. */ ) #ad-1 #question-mark ( šírka: 24px; výška: 50px; obrázok na pozadí: url(../images/ad-1/question-mark.png); pozícia: absolútna; vpravo: 34px; hore: -30px; animácia: oneskorené zoslabnutie-animácia 4s 1 uvoľnenie-v-out; /* Miznutie v otázniku */ )
Teraz poďme vytvoriť štýly pre oblaky. Pri nich využijeme animáciu s efektom nekonečného pohybu. ilustrácia ukazuje podstatu myšlienky:

A tu je kód CSS:
#ad-1 #clouds ( pozícia: absolútna; horná časť: 0px; z-index: 0; animácia: animácia v mraku 30 s nekonečne lineárne; /* Posúvanie oblakov doľava, resetovanie a opakovanie */ ) #ad-1 #cloud -group -1 (šírka:720px; pozícia: absolútna; vľavo:0px; ) #ad-1 #cloud-group-2 (šírka: 720px; pozícia: absolútna; vľavo: 720px; ) #ad-1 .cloud-1 ( šírka : 172px; výška: 121px; obrázok na pozadí: url(../images/ad-1/cloud-1.png); pozícia: absolútna; hore: 10px; vľavo: 40px; ) #ad-1 .cloud -2 (šírka: 121px; výška: 75px; obrázok na pozadí: url(../images/ad-1/cloud-2.png); pozícia: absolútna; hore: -25px; vľavo: 300px; ) #ad- 1. cloud-3 (šírka: 132px; výška: 105px; obrázok na pozadí: url(../images/ad-1/cloud-3.png); pozícia: absolútna; hore: -5px; vľavo: 530px; )
Animácie
Pripomienka: Od tohto momentu už vlastne nič nie je animované. Ak sa teraz pozriete na náš banner, uvidíte statický obrázok. Tu sa vytvárajú animácie, ktoré sa volajú vo vyššie uvedenom kóde.
Teraz vdýchnime život nášmu nádhernému statickému obrazu:
/* Na zobrazenie viacerých prvkov sa používa animácia so simulovaným oneskorením. Simulácia oneskorenia sa vykonáva spustením procesu s pokračovaním 80 % animácie (a nie okamžite). Takto môžete simulovať akékoľvek oneskorenie: */ @keyframes delayed-fade-animation ( 0% (nepriehľadnosť: 0;) 80% (nepriehľadnosť: 0;) 100% (nepriehľadnosť: 1;) ) /* Animácia na zobrazenie formulár s emailová adresa a tlačidlo. Používa tiež simulované oneskorenie */ @keyframes form-animation ( 0% (nepriehľadnosť: 0; vpravo: -400px;) 90% (nepriehľadnosť: 0; vpravo: -400px;) 95% (nepriehľadnosť: 0,5; vpravo: 20px; ) 100 % (nepriehľadnosť: 1; vpravo: 0px;) ) /* Táto animácia sa používa na vytiahnutie člna z obrazovky na začiatku videa: */ @keyframes animácia člna ( 0 % (vľavo: -200px;) 100% (vľavo: 20px;) ) /* Animácia pre oblaky. Prvá skupina oblakov sa začína pohybovať od stredu a druhá - napravo od obrazovky. Prvá skupina sa pomaly odstráni z obrazovky a druhá sa zobrazí vpravo. Keď je ľavá skupina úplne skrytá, oblaky sa rýchlo vrátia do svojej pôvodnej polohy: */ @keyframes cloud-animation ( 0% (vľavo: 0px;) 99,9999% (vľavo: -720px;) 100% (vľavo: 0px; ) ) / * Posledné tri animácie sú takmer rovnaké - rozdiel spočíva v umiestnení prvkov. Napodobňujú špliechanie morských vĺn: */ @keyframes animácia člna ( 0 % (dole: 0px; vľavo: 0px;) 25 % (dole: -2px; vľavo: -2px;) 70 % (dole: 2px; vľavo : - 4px;) 100% (dole: -1px; vľavo: 0px;) ) @keyframes water-back-animation ( 0% (dole: 10px; vľavo: -20px;) 25% (dole: 8px; vľavo: - 22px; ) 70% (dole: 12px; vľavo: -24px;) 100% (dole: 9px; vľavo: -20px;) ) @keyframes vodná-predná animácia ( 0% (dole: -70px; vľavo: -30px) ;) 25 % (dole: -68px; vľavo: -32px;) 70% (dole: -72px; vľavo: -34px;) 100% (dole: -69px; vľavo: -30px;) )
Záver
V tejto lekcii sme sa naučili niekoľko kľúčových pojmov:
1. Prvky potomkov dostanú okrem svojich animácií animácie svojich rodičov.
2. Pri vytváraní bannera by ste sa mali snažiť použiť jedinečný identifikátor, aby ste sa vyhli prekrývaniu kódu s existujúcim projektom CSS.
3. Prvky by mali byť umiestnené a upravené tak, ako keby animácia nebola k dispozícii, aby sa zabezpečila spätná kompatibilita.
4. Ak je to možné, mali by ste použiť jednu animáciu pre niekoľko prvkov.