Aby sme pochopili štruktúru nášho značky, zamerame sa na loď na druhú sekundu:

>

>
>
>

Teraz sa pozrite na prvý banner na demo stránke. Existujú tri samostatné animácie, ktoré sa vyskytujú na lodi:

• Animácia - keď sa loď snímky na ľavej strane. Toto sa aplikuje priamo na neusporiadaný zoznam (skupina prvkov lode).
• Animácia - ktorá dáva loď swing efekt, modelovanie lode plávajúcej na vode. Týka sa to priamo na prvky zoznamu (na lodi).
• Animácia - ktorá skrýva otáznik. Týka sa to oddiel - otázniku.

Ak netrpíte námorným ochorením, potom sa pozrite na demo stránku. Uvidíte, že animácia, ktorá sa vzťahuje na položku zoznamu (loď), nútením lode na vzostup, ovplyvňuje aj div v nej (s otáznikom). Okrem toho, "snímok v" animácii, ktorá sa vzťahuje na neusporiadaný zoznam (skupina), ovplyvňuje aj zoznam a divový prvok vo vnútri IT (čln a otáznik). To nás vedie k dôležitým pozorovaniam:

Dcéra prvky zdedili animáciu od svojich rodičov, okrem vlastnej animácie. Tieto vedomosti sa pridávajú do nášho Arsenalu, ale počet detí / rodičovských prvkov pri vytváraní animácie vyhodí váš mozog (a procesor na laptop vašej babičky)!

CSS.

Predtým, než budeme pokračovať na naozaj zaujímavý materiál a začať vytvárať animáciu, stále musíme vytvoriť štýly pre prehliadače, ktorí sú uviaznutí v 18. storočí.

Záložné štýly pre staré prehliadače


Jednoducho vytvoríme záložné štýly, ako keby CSS animácie neexistovali (myšlienka, že CSS animácie neexistuje, bude nútiť žiadnu dospelú osobu nielen na plač, ale zavesiť sa so mnou :)). Inými slovami, ak naša animácia nie je schopná hrať, banner by mal stále vyzerať slušné. Takže, keď niekto prezerajúci banner s pomocou starého prehliadača, uvidia normálne, statické banner namiesto prázdneho miesta.

Napríklad: Ak niekto používa CSS, ako je toto, budú problémy:

/* ZLÝM SMEROM! * /


0% (opacita: 0;)
100% (opacita: 1;)
}

Div (
Opacity: 0; / * Tento blok je štandardne skrytý! * /

}

Ak prehliadač používateľa nepodporuje animáciu, banner bude pre neho neviditeľný. A potom klient poruší dvere v kancelárii predávajúceho - s reťazovou pískou v rukách - a bude ho vyžadovať, aby vysvetlil, prečo nepredávali svoj tovar! A ak nie sú schopní pochopiť, že prehliadač môže byť taký žalostný, ich život skončí strašne a ich posledné slová budú prekliaty na Internet Explorer ... :)

Ale nebojte sa, poskytneme pokročilú podporu prehliadača:

/* SPRÁVNA CESTA */

@KEYFRAME OUR-FADE-IN-ANIMATION (
0% (opacita: 0;)
100% (opacita: 1;)
}

Div (
Opacity: 1; / * Tento div bude v predvolenom nastavení viditeľný * /
Animácia: Naša-Fade-in-Animácia 1s 1;
}

Ako vidíte, DIV sa zobrazí, aj keď animácia nie je schopná stratiť. Ak je animácia schopná hrať, DIV bude okamžite skrytý a animácia sa stratí až do konca.

Teraz, keď vieme, ako urobiť naše animované bannery s podporou starých prehliadačov, poďme do hlavných CSS.

Na pamäti sú tri kľúčové veci:

• Keďže tieto reklamy môžu byť použité na rôznych webových stránkach, urobíme všetky naše štýly CSS veľmi špecifické.. Začneme reklamy každého voliča s ID: # AD-1. To vám umožní chrániť naše štýly banner z intervencie existujúcich štýlov a prvkov.
• Budeme zacielení ignorovať funkciu oneskorenia animácie Pri vytváraní nášho animácie. Ak sme použili funkciu oneskorenia animácie, ako aj dizajn pre naše prvky v správnom spôsobe (viditeľné štandardne), toto bolo viditeľné na obrazovke predtým, ako sa animácia začala hrať. To je dôvod, prečo animácia začína okamžite, čo umožňuje skryť prvky z obrazovky, kým nie sú potrebné. Budeme simulovať oneskorenie animácie zvýšením trvania a manuálne nastavenia kľúčového slova. Uvidíte príklady, keď začneme vytvárať animáciu.
• Ak je to možné, použite jednu animáciu pre viac položiek. Môžeme teda ušetriť veľa času a znížiť rast kódu. Môžete vytvoriť niekoľko rôznych efektov, v rovnakej animácii, nastavenie trvania a prechodov.

Začneme vytvoriť náš reklamný banner. Uistite sa, že má relatívne miesto (poloha: relatívna), takže prvky môžu byť umiestnené vo vnútri správne. Musíme sa tiež uistiť, že je nastavený majetok prepadov: skrytý skryť všetko príliš veľa:

# Ad-1 (
Šírka: 720px;
výška: 300px;
float: vľavo;
margin: 40px AUTO 0;
pozadia-obraz: adresa URL (../images/ad-1/background.png);
pozícia pozadia: Centrum;
pozadia - opakovanie: bez opakovania;
prepad: skrytý;
pozícia: relatívna;
Box-Shadow: 0px 0px 6px # 000;
}

# Ad-1 #content (
Šírka: 325px;
plavák: vpravo;
margin: 40px;
text-ALIGN: Centrum;
z-index: 4;
pozícia: relatívna;
prechod: Viditeľné;
}
# AD-1 H2 (
fONT-RODINA: "ALFA SLAB ONE", CURSIVE;
farba: # 137DD5;
veľkosť písma: 50px;
výška linky: 50px;

Animácia: Oneskorená-Fade-Animácia 7S 1 Ease-in-out; / * H2 zmizne s simuláciou oneskorenia animácií * /
}
# AD-1 H3 (

farba: # 202224;
font-veľkosť: 31px;
výška linky: 31px;
text-tieň: 0PX 0PX 4PX #FFF;
Animácia: Oneskorená-Fade-Animácia 10s 1 Ease-in-out; / * H3 zmizne s simuláciou oneskorenia animácií * /
}
# Ad-1 forma (
margin: 30px 0 0 6PX;
pozícia: relatívna;
Animácia: Form Animation 12s 1 Ease-in-out; / * Tento kód presúva našu formu s e-mailom * /
}
# AD-1 #Email (
Šírka: 158px;
výška: 48px;
float: vľavo;
Čalúnenie: 0 20px;
veľkosť písma: 16px;
font-Rodina: "Lucida Grande", Sans-Serif;
farba: #fff;
text-tieň: 1px 1px 0px # A2917D;
Polover-ľavý-vľavo: 5px;
Radius ľavostranného vľavo: 5px;
hranica: 1px Solid # A2917D;
obrys: Žiadny;
Box-Shadow: -1PX -1PX 1PX #FFF;
pozadia-farba: # C7B29B;
pozadia-obraz: lineárny gradient (dno, RGB (216, 201, 185) 0%, RGB (199, 178, 155) 100%);
}
# AD-1 #EMAIL: FOCUS (
pozadia-obraz: lineárny gradient (dno, RGB (199, 178, 155) 0%, RGB (199, 178, 155) 100%);

}
# Ad-1 #submit (
výška: 50px;
float: vľavo;
kurzor: ukazovateľ;
Čalúnenie: 0 20px;
font-veľkosť: 20px;
fONT-RODINA: "BOOGALOO", CURSIVE;
farba: # 137DD5;
text-tieň: 1PX 1PX 0PX #FFF;
Radius v pravom hornom rohu: 5px;
Radius pravý-vpravo - 5px;
hranica: 1px Pevná # BCC0C4;
border-Left: Žiadne;
pozadia-farba: #fff;
pozadia-obraz: lineárny gradient (dno, RGB (245, 247, 249) 0%, RGB (255, 255, 255) 100%);
}
# AD-1 #SUBMIT: Hover (
pozadia-obraz: lineárny gradient (dno, RGB (255, 255, 255) 0%, RGB (255, 255, 255) 100%);
}

Teraz vytvoríme štýly vody a zavolajte vhodnú animáciu:

# Ad-1 ul # voda (
/ * Ak by sme chceli pridať ďalšiu animáciu vody (napríklad horizontálne), mohli by sme to urobiť tu * /
}
# Ad-1 li # water-back (
Šírka: 1200px;
výška: 84px;
pozadie - obrázok: URL (../images/ad-1/water-back.png);

z-index: 1;
pozícia: Absolútna;
dno: 10px;
vľavo: -20px;
Animácia: Water-Back-Animácia 3s Infinite Ease-in-out; / * Skákací efekt vody * /
}
# Ad-1 li # water-front (
Šírka: 1200px;
výška: 158px;
pozadie - obrázok: URL ( ../images/ad-1/water-front.png.) ;
pozadie-REPEAT: REPEAT-X;
z-index: 3;
pozícia: Absolútna;
dno: -70px;
zľava: -30px;
Animácia: Water-Front-Animácia 2s Infinite Ease-in-out; / * Ďalší účinok skákania vody - je mierne odlišný. Urobíme túto animáciu trochu rýchlejšie, aby sme vytvorili nejaký perspektívu. * /
}

Poďme si vytvoriť štýly pre loď a všetky jej prvky. Opäť povedieme vhodnú animáciu:

# Ad-1 ul # lodný
Šírka: 249px;
výška: 215px;
z-index: 2;
pozícia: Absolútna;
dno: 25px;
vľavo: 20px;
prechod: Viditeľné;
Animácia: Boat-in-Animácia 3S 1 Ease-Out; / * Presúvanie skupiny na začiatku * /
}
# Ad-1 ul # loď li (
Šírka: 249px;
výška: 215px;
pozadia-obraz: URL (../images/ad-1/boat.png);
pozícia: Absolútna;
dno: 0px;
vľavo: 0px;
prechod: Viditeľné;
Animácia: Boat-Animácia 2s Nekonečnite Ease-in-out; / * Imitácia lode kymácajúce sa na vode - podobné animácie sa už používajú na samotnú vodu. * /
}
# Ad-1 # otáznika (
Šírka: 24px;
výška: 50px;
pozadie - obrázok: URL ( ../images/ad-1/question-mark.png.) ;
pozícia: Absolútna;
právo: 34px;
top: -30px;
Animácia: Oneskorená-Fade-Animácia 4s 1 Ease-in-out; / * Skryť otáznik * /
}

Posledné, ale vytvoríme štýly pre skupinu oblakov a pre jeden mrak. Zavoláme tiež pomerne elegantnú animáciu, ktorá im poskytne nepretržitý rolovací efekt. Tu je ilustrácia toho, čo sa stane:



Toto sú tieto štýly:

# Ad-1 #clouds (
pozícia: Absolútna;
top: 0px;
z-index: 0;
Animácia: Cloud-Animácia 30s Infinite Linear; / * Presunúť mraky doľava, nekonečný počet krát * /
}
# 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;
pozadia-obraz: adresa URL (../images/ad-1 / Cloud-1 .png);
pozícia: Absolútna;
top: 10px;
zľava: 40px;
}
# Ad-1 .Cloud-2 (
Šírka: 121PX;
výška: 75px;
pozadie-obrázok: URL (../images/ad-1 / Cloud-2 .png);
pozícia: Absolútna;
top: -25PX;
vľavo: 300px;
}
# Ad-1 .Cloud-3 (
Šírka: 132px;
výška: 105px;
pozadie-Image: URL (../images/ad-1 / Cloud-3 .png);
pozícia: Absolútna;
top: -5px;
vľavo: 530px;
}

WAFFF! Bolo tam veľa CSS kódu. Ale najzaujímavejšie ďalšie!

Animácia


Pamätajte si, že do tohto bodu, nie, vlastne neexistovala animácia. Ak ste teraz sledovali banner, uvidíte, čo by sa objavil starý prehliadač - statické oznámenie. Zhynesv skutočnosti vytvoríme animáciu, ktorú sme už zavolali v našom CSS kód.

Teraz, keď sa naše banner zobrazuje dobre, poďme oživiť toto statické oznámenie! Poďme rovno k kódu - poviem vám v komentároch, ktoré sa stanú:

Záver

Počas tejto lekcie sme sa naučili kľúčové body vytvárania animácie, s podporou starých prehliadačov:

1. Dcéra prvky zdedili svojich rodičov okrem vlastnej animácie. Môžeme ho použiť na vytvorenie zložitejšie animácie.
2. Pre štýly našej reklamy musíme použiť veľmi špecifické selektory, takže naše reklamy nebudú predefinované inými štýlmi štýlov.
3. Je potrebné nastaviť takéto štýly pre prvky, ktoré ak naša animácia nie je schopná hrať, oznámenie by malo stále vyzerať slušne.
4. Keď je to možné, použite jednu animáciu pre niekoľko prvkov - ušetrite čas a zabrániť generácii kódu.
5. Často sa obráťte na Internet Explorer, ako na "prehliadači z 18. storočia" a zároveň s odporom a hnevom, ktorú päsť striahnete. :)

Veľa šťastia vo vašich experimentoch s CSS.

Priatelia, Ahoj všetci. Dnes budeme pokračovať v vytváraní bannerov v programe Web Designer Google vo formáte HTML5 s 3D efektom.

A toto je pochopiteľné, bannery vytvorené na HTML5 a CSS3 sa zobrazia na všetkých obrazovkách na počítači, televízoroch a mobilných zariadeniach. Čo nemôžete povedať o flash bannerov.

Okrem toho tieto bannery môžu stačiť na použitie a banner bude vyzerať skvele na akúkoľvek obrazovku.

A vzhľadom na to, že mobilné zariadenia sa stále viac používajú na zobrazenie internetových zdrojov, je veľmi dôležité.

Už som povedal hlavným a umiestnením na stránke v poslednom článku. Takže dnes budem venovať pozornosť vytváraniu 3D efektov a cyklistických nastavení (re-show). A tiež zvážiť niekoľko nastavení pre "Udalosti".

V detaile maľovať všetok tento proces pomerne ťažké, takže som si priniesť vašu pozornosť video tutorial. Takže master materiál bude oveľa jednoduchší. A tiež si stiahnite archív s projektom môjho bannera, ako vizuálny príklad.

Príprava na vytvorenie bannera s 3D efektom.

Typ bannera v hotovej forme závisí od prípravy prípravku. Editor Web Designer Google vám umožňuje vytvoriť realistické 3D efekty a všetko bude napísané v HTML kódexu, stačí správne zostaviť vo vizuálnom editore.

Ak chcete vytvoriť vysoko kvalitný 3D efekt, musíte predrezať do Photoshop obrobku, ktorý budete v budúcnosti potrebovať dok v službe Google Web Designer.

Ako príklad som pripravil takéto prázdne miesta:

Urobil som tieto predvalky vo Photoshope, ale na internete je mnoho podobných snímok. Nemôžete kpiť, ale vykonajte pripravené možnosti.

Poznámka: Ak máte záujem o proces vytvárania takýchto medzier, napíšte o tom v komentároch.

Je tiež dôležité zvážiť všeobecné zloženie bannera a skriptu. Záleží na tom, ako bude banner vnímaný ako celok.

Vytvorenie 3D objektu v Google Web Designer.

Takže, analogicky s posledným článkom, spustíte editor, vytvorte nový projekt.



3D efekt znamená kompozitný obraz, to znamená, že obraz pozostávajúci z niekoľkých kusov umiestnených v požadovanom projekcii.

Tieto viaceré obrazy je potrebné kombinovať buď v skupine alebo mieste v DIV. A tak to bude správne. Ale je to vhodnejšie, aby som pracoval s bokom.

Krok 1. Vytvorenie blokového bloku.

Ak chcete vytvoriť rozvod, vyberte si v ľavom paneli "Tag nástroj (D) ".



Uistite sa, že budete priradiť identifikátor. A Pon veľkosťou pomocou úseku "Vlastnosti" v pravej table.

Teraz musíte zvýrazniť blok. Ak to chcete urobiť v ľavej tabuli "Nástroj na výber (V) " A dvakrát kliknete na ľavé tlačidlo myši na ráme DIV bloku. Vymení farbu červenej farby.



Krok 2. Zamykanie obrázkov.

A teraz začína najviac starostlivý proces. Musíte nastaviť všetky prvky jedného jediného obrázka.

V mojej likvidácii sú nasledujúce položky:

- Horná strana.

- strana (pozostáva z troch samostatných častí).

Ak chcete začať, umiestnime revolving (zadnú) stranu obrazu a zarovnajte ho v strede a horným okrajom bannera.



Rovnakým spôsobom pridajte prednú stranu. Zarovnajte a posuňte pozdĺž osi Z.



Od šírky strany 4px (pixelu), potom som posunul prednú a zadnú stranu pozdĺž osi Z na 2PX a -2PX. Čo zabezpečí medzeru medzi obrázkami.

Poznámka: Presné obrázky posunu sú na screenshots.

Ďalej pridajte stranu, všetky časti samostatne. Použite nástroje pre pohodlie "3.D Rotácia pracovného priestoru » a "Mierka". Pomôžu vám uistiť sa, že všetky podrobnosti.



Ak chcete začať, navrhujem, postaví všetky obrázky na jednej strane a potom ich skopírujte a umiestni ich do zrkadlovej projekcie na druhej strane.

Ďalším krokom je vybudovanie ľavého horného rohu.



Teraz centrálna časť strany.



A dolný roh na ľavej strane.



Všetky prvky strany musia nevyhnutne zarovnať os y o 90 °.

Teraz musíte skopírovať požadovanú vrstvu a znova ho prilepiť, premenovať a zmeniť parametre umiestnenia, takže získame prvky pre pravej strane.

Ak to chcete urobiť, vyberte obrázok v spodnom paneli - stlačíte kombináciu klávesov CTRL + C a vložte Ctrl + V Duplicate.



Začnime to isté ako pole poľa zhora nadol, ale len vpravo.

Horné pravé veko.









Netrvoril som spodnú časť, pretože nie je viditeľná v obraze.

Najväčšia práca je dokončená. Teraz môžete pokračovať v nastavení animácie. Ako vizuálna ukážka, urobte otočenie obrazu.

Vytvorenie efektu rotácie na web designer Google.

Po prvé, musíte opustiť DIV blok, v ktorom sú všetky prvky obrazu. To znamená, že sme pracovali vo vnútri bloku s konkrétnymi obrázkami, a teraz budete musieť pracovať so všetkými obrázkami súčasne, riadiť DIV.

Ak chcete začať, stlačte tlačidlo DIV na spodnom paneli.



Takže, na chate času kliknutím pravým tlačidlom myši, vytvorte dva keyframes. Mal by fungovať takto:



Umiestnenie zdrojového rámu na stupnici Y je nastavené na -90 °.



Prvý kľúčový kľúč (druhý na skóre) vystavuje na stupnici y o 0 °.



Druhý rámový rám (tretí účet) vykazuje na stupnici y o 90 °.



Všetko je možné skontrolovať výsledok. Kliknite na tlačidlo Hrať..

TRUE, náš obrázok urobí len jeden obrat. Aby obraz sa mohol otáčať alebo vykonať niekoľko otáčok, musíte konfigurovať cyklické parametre.

Nastavte cyklickosť v službe Google Web Designer.

V programe môžete nakonfigurovať niekoľko možností cyklicity (opakovanie). Takže môžete konfigurovať opakovanie pre všetky bannerové prvky alebo každý prvok samostatne.

Tiež cyklickosť môže byť obmedzená počtom opakovaní alebo nekonečným.

Na spodnom paneli existujú symboly vedľa každého prvku "Hrad", "Eye", "Reverse Arrow".

Ak chcete nastaviť cyklus, musíte kliknúť na symbol "Reverse šípka". A vyberte si obmedzený počet opakovaní alebo nekonečnou možnosťou.



Vybral som nekonečné opakovanie animácie. Ako chcem konfigurovať v budúcnosti "Diania" Rotácia sa teda zastaví, keď sa kurzor myši sa pohybuje a pokračuje po odstránení kurzora.

Zastavte otáčanie pri vzniku kurzora myši na banner.

Najprv na prvý kľúčový rámček (druhý na skóre), nainštalujte skratku. Ak to chcete urobiť, nad rámec, kliknite pravým tlačidlom myši na tlačidlo myši a vyberte položku Menu. "Pridať štítok". Zadajte názov skratky a kliknite na tlačidlo ENTER.



A v nasledujúcom kroku vyberte ako prijímač « Page1. Nebudú tam žiadne iné možnosti.

A posledný krok, vyberte štítok, ktorý vytvoril v počiatočnom štádiu.



Uložiť udalosti a šek. Rotácia bannera sa zastaví, keď prejdete kurzorom myši, na ráme, kde bol štítok vyrobený.

Obnovenie otáčania po vodičoch kurzora myši.

Aby sa otáčka pokračovala, po ukončení kurzora na strane konfigurujte inú udalosť.

Je nakonfigurovaný rovnakým spôsobom ako predchádzajúci, len s dvoma rozdielmi.

Ako sa vyberie udalosť "Myš"— « mouseout ».



Event - myš kolaps

A ako akcia "Časová os" — « tOGGLEPLAY ».



Akcia - Pokračujte

Tu je pripravený na náš banner s 3D efektom. A môžete prísť s takýmito rôznymi účinkami, ako sa vám páči.

Nezabudnite udalosti na kliknutí na tlačidlo myši a otvorte odkaz. Banner nie je kvôli vytvorenej kráse, pretože tak.

Tento proces sa spočiatku môže zdať komplikovaný, ale robiť pár bannerov, nezdá sa tak.

Mám dnes všetko, priatelia. Želám vám veľa úspechov, čaká na váš komentár k stretnutiam v nových článkoch a video tutoriály.

S pozdravom, Maxim Zaitsev.