Jednoduchá tvorba bannerov pomocou css3. Animovaný banner s CSS3

Urobme si reklamný banner pomocou CSS3. V súčasnosti sú plne podporované iba animácie CSS3 Prehliadače Firefox a WebKit. Je však dosť jednoduché, aby banner fungoval v iných prehliadačoch. Pri experimentovaní s najnovšími technikami CSS však nečakajte všade veľký výkon (najmä v IE 7 a staršom).

Poznámka: Z dôvodu úspory miesta na stránke boli vynechané všetky predpony výrobcu prehliadača. Pozrite si kód v zdrojoch.

HTML značky

Najprv sa pozrime na štruktúru banneru v HTML. V tejto fáze si musíme predstaviť, ako bude animácia fungovať:

Pre hlbšie pochopenie štruktúry značiek sa zamerajme na loď:

S loďou sa vyskytujú tri animácie:

Loď sa šmýka vľavo. Platí pre neusporiadaný zoznam (skupinu).

Imitácia člna, ktorý sa hojdá na vode. Vzťahuje sa na položku zoznamu (loď).

Vzhľad otáznika. Vzťahuje 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). Na položke zoznamu (loď a otáznik) funguje aj animácia „vysúvania“ pre neusporiadaný zoznam.

Preto môžeme konštatovať, že detské prvky dostávajú okrem svojich vlastných akcií animácie od svojich rodičov. Teraz už zostáva len vypísať štruktúry rodič/dieťa.

CSS

Než začnete analyzovať tvorbu animácie, musíte sa uistiť spätne kompatibilné so staršími prehliadačmi.

spätná kompatibilita

Spätnú kompatibilitu zaistíme jednoduchým štýlom označenia, ako keby animácie CSS vôbec neexistovali. Ak si niekto prezerá stránku v starom prehliadači, zobrazí sa mu obyčajný statický obrázok a nie prázdne miesto.

Napríklad: čo ak používate CSS? podobne ako nižšie, vyskytnú sa problémy:

/* OMYL! */ @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ácie, prvok div zostane pre používateľa neviditeľný.

A takto zabezpečíme 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 zobrazí, aj keď sa animácia nespustí. A v moderných prehliadačoch bude div najskôr skrytý počas animácie.

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, urobíme maximum Selektor CSSšpeciálne. Všetky budú začínať identifikátorom #ad-1. Týmto spôsobom sa pokúsime vyhnúť prekrývaniu nášho kódu a kódu stránky.

Zámerne ignorujeme oneskorenie animácie v inštaláciách. Ak pri nastavovaní štýlov s predvolenou viditeľnosťou prvkov použijete oneskorenie animácie, naruší sa štruktúra banneru 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ímok.

Keď je to možné Používame jednu animáciu pre niekoľko prvkov. Týmto spôsobom ušetríme čas a znížime veľkosť kódu.

Poďme si teda vytvoriť základ pre náš banner. Nastavme mu relatívne umiestnenie, aby bolo možné správne umiestniť vnútorné prvky. Skryje tiež čokoľvek mimo rozsahu 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. Vyvolajte 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; /* Zobrazuje sa h2 so simulovaný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á animácia fade 10 s 1 uvoľnenie; /* Zobrazuje 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; /* Vysunutie formulára na zadanie e-mailovej adresy so simulovaným oneskorením */ ) #ad-1 #email (šírka: 158px; výška: 48px; float: left; padding: 0 20px; font -veľkosť: 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; 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 nastavíme štýly pre vodu a zavoláme príslušnú animáciu:

#ad-1 ul#water( /* Ak potrebujete ďalšiu animáciu pre vodu, 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é uvoľnenie von; /* Imitácia špliechajúcich vĺn */ ) #ad-1 li#water-front ( šírka: 1200px; výška: 158px; obrázok na pozadí: 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; /* Iné Simuluje špliechanie vĺn. Animácia pobeží o niečo rýchlejšie, aby sa vytvoril efekt perspektívy. */ )

Poďme nastaviť štýly pre loď a jej prvky. Zodpovedajúce 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; spodná časť: 0px; vľavo: 0px; pretečenie: viditeľné; animácia: animácia člna 2s nekonečné uvoľnenie von; /* Simulácia kolísania č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 vytvoríme štýly pre oblaky. Na ne použ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; top: 0px; z-index: 0; animácia: cloud-animation 30s infinite linear; /* Rolujte oblaky doľava, resetujte a opakujte */ ) #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ú a volajú animácie v kóde vyššie.

Teraz vdýchnime život nášmu nádhernému statickému obrázku:

/* Simulovaná animácia oneskorenia sa používa na zobrazenie viacerých prvkov. 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 pre zobrazenie formulára s emailová adresa a tlačidlo. Používa sa aj imitácia oneskorenia */ @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 spustenie lode z obrazovky na začiatku videa: */ @keyframes animácia člna ( 0% (vľavo: -200px;) 100% (vľavo : 20px;) ) /* Animácia pre mraky. 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. Akonáhle je ľavá skupina úplne skrytá, oblaky sa veľmi 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. Simulujú š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 dedičov dostávajú okrem svojich vlastných 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. Pozícia a štýl prvkov by sa mali zvoliť 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.

Nepochybne jeden z najjasnejších trendy 2012 prebieha vývoj CCS3, HTML5. Dnes ponúkame veľké a veľmi užitočná recenzia príklady" 20+: kreatívne a užitočné lekcie o CSS3″ ponúkané na SpeckyBoy. Všetky príklady sú vyrobené na čisté bez JavaScriptu, prezentované lekcie zahŕňajú ukážky a hotové CSS3 súbory na stiahnutie.

Sme si istí, že tieto techniky budú užitočné pre vývojárov webu!

css3 lekcie :

1. CSS3 fotogalérie, slidery, efekty s obrázkami

1.1. Posuvník na CSS3

Nemôžem tomu uveriť, ale tento posúvač s rôznymi efektmi je vyrobený výlučne v CSS3, veľmi pôsobivý.

1.2. Pozadie pre webovú stránku na celú obrazovku s efektom posúvača pomocou CSS3

Webdizajnéri už dlho experimentujú s rôznymi pozadiami stránky, ale zatiaľ čistý CSS Dalo sa urobiť veľmi málo, museli sme použiť JS. CSS3 vám teraz dáva možnosť 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ť niekoľko pozadí s rôznymi efektmi a so škálovateľnosťou pozadia v závislosti od parametre 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 s rôznymi efektmi pomocou čistého CSS.

1.4. Vlastnosti obrázka v CSS3

Tento tutoriál demonštruje nové funkcie v CSS3 pre vlastnosti obrázkov, ako sú zaoblené rohy, tiene a iné efekty.

1.5. Animovaný banner s CSS3

1.6. Panel načítania v 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 v CSS3

Jednoduchý tutoriál, ktorý ukazuje, ako vytvoriť animované menu v CSS3 s rôznymi efektmi.

2.3. Animované vertikálne menu s CSS3

2.4. Animované tlačidlá s CSS3

Skvelý tutoriál so 7 príkladmi animovaných kreatívnych tlačidiel.

2.5. Kreatívne animované menu s obrázkami pomocou CSS3

V tejto lekcii vám 10 prezentovaných príkladov jednoducho otvorí oči. Takéto komplexné kreatívne menu sa kedysi vytvárali výhradne 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. Zaznamenať si!

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 efekty na CSS3

3.1. Animovaný popis v CSS3 bez jQuery

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

A to je pochopiteľné, bannery vytvorené v html5 a css3 sa zobrazujú na akejkoľvek obrazovke, na počítačoch, televízoroch aj mobilných zariadeniach. To isté sa nedá povedať o flash banneroch.

Navyše, tieto bannery sa dajú jednoducho použiť a banner bude vyzerať skvele na každej obrazovke.

A vzhľadom na skutočnosť, že mobilné zariadenia sa čoraz viac používajú na prezeranie internetových zdrojov, je to veľmi dôležité.

To hlavné a jeho umiestnenie na stránke som už opísal v predchádzajúcom článku. Takže dnes budem venovať pozornosť vytváraniu 3D efektu a cyklickým (opakovaným) nastaveniam. Pozrieme sa tiež na niekoľko nastavení pre „udalosti“.

Je dosť ťažké celý tento proces podrobne opísať, preto vám ponúkam videonávod. To značne uľahčí zvládnutie materiálu. Stiahnite si archív s mojím bannerovým projektom ako vizuálny príklad.

Príprava na vytvorenie bannera s 3D efektom.

Konečný vzhľad banneru v konečnom dôsledku závisí od prípravy. Editor Google Web Designer vám umožňuje vytvárať realistické 3D efekty a to všetko bude zapísané html kód, stačí si všetko správne poskladať vo vizuálnom editore.

Ak chcete vytvoriť kvalitný 3D efekt, musíte vo Photoshope najskôr vyrezať polotovary, ktoré bude neskôr potrebné spojiť v aplikácii Google Web Designer.

Ako príklad som pripravil nasledujúce polotovary:

Tieto polotovary som urobil vo Photoshope, ale na internete je veľa podobných obrázkov. Nemusíte sa namáhať, ale vezmite si hotové možnosti.

Poznámka: Ak máte záujem o proces vytvárania takýchto polotovarov, napíšte o tom do komentárov.

Dôležité je myslieť aj na celkovú kompozíciu banneru a scenára. To určuje, ako bude banner vnímaný ako celok.

Vytvorenie 3D objektu v aplikácii Google Web Designer.

Analogicky s predchádzajúcim článkom teda spustite editor a vytvorte nový projekt.

3D efekt znamená zložený obraz, teda obraz pozostávajúci z niekoľkých častí umiestnených v požadovanej projekcii.

Tieto viaceré obrázky je potrebné spojiť buď do skupiny, alebo umiestniť do bloku DIV. A tak a tak bude správne. Je však pre mňa pohodlnejšie pracovať so stranou DIV.

Krok 1: Vytvorte blok DIV.

Ak chcete vytvoriť blok DIV, v ľavom paneli vyberte položku "Nástroj na označovanie (D)".

Nezabudnite prideliť ID. A upravte veľkosti pomocou sekcie "Vlastnosti" v pravom paneli.

Teraz musíte vybrať blok. Ak to chcete urobiť, v ľavom paneli vyberte nástroj na výber (V)" A dvojité kliknutie kliknite ľavým tlačidlom myši na rám bloku DIV. Zmení farbu na červenú.

Krok 2. Usporiadanie obrázkov.

A teraz začína ten najnáročnejší proces. Musíte odkryť všetky prvky jedného obrázka.

K dispozícii mám nasledovné položky:

- Horná strana.

— Strana (pozostáva z troch samostatných častí).

Najprv umiestnite rubovú (zadnú) stranu obrázka a zarovnajte ju so stredom a horným okrajom bannera.

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

Keďže šírka strany je 4px (pixely), posunul som prednú a zadnú stranu pozdĺž osi Z o 2px a -2px. Tým sa vytvorí medzera medzi obrázkami.

Poznámka: presné čísla posunutia nájdete na snímkach obrazovky.

Ďalej pridajte stranu, všetky časti oddelene. Na uľahčenie umiestnenia použite nástroje "3D rotácia pracovnej oblasti" A "mierka". Pomôžu vám presne upraviť všetky detaily.

Na začiatok navrhujem zarovnať všetky obrázky na jednej strane a potom ich skopírovať a umiestniť do zrkadlovej projekcie na druhú stranu.

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

Teraz centrálna časť strany.

A dolný roh na ľavej strane.

Dbajte na to, aby ste všetky bočné prvky zarovnali pod uhlom 90 0 pozdĺž osi Y.

Teraz musíte skopírovať požadovanú vrstvu a znova ju prilepiť, premenovať ju a zmeniť parametre umiestnenia, aby sme získali prvky pre pravú stranu.

Ak to chcete urobiť, vyberte obrázok v spodnom paneli - stlačte kombináciu klávesov CTRL + C (kopírovať) a vložte duplikát CTRL + V.

Začnime rovnako ako poľná strana zhora nadol, ale len pre tú pravú.

Pravý horný kryt.

Spodnú časť som nerobil, keďže to na obrázku nie je vidieť.

Najťažšia práca je za nami. Teraz môžete začať nastavovať animáciu. Ako názornú ukážku otočme obrázok.

Vytvorenie efektu rotácie v aplikácii Google Web Designer.

Prvým krokom je opustenie bloku DIV, ktorý obsahuje všetky prvky obrázka. To znamená, že sme pracovali vo vnútri bloku so špecifickými obrázkami a teraz budeme musieť pracovať so všetkými obrázkami súčasne a spravovať blok DIV.

Ak chcete začať, kliknite na tlačidlo DIV v spodnom paneli.

Takže na chate času klikanie pravé tlačidlo myšou, vytvorte dva kľúčové snímky. Malo by to vyzerať takto:

Umiestnenie pôvodného rámu na stupnici Y je nastavené na -90 0 .

Prvú kľúčovú snímku (druhú) na stupnici Y nastavíme na 0 0 .

Nastavte druhý kľúčový rámček (tretí v rade) na 90 0 na stupnici Y.

Môžete skontrolovať výsledky. Ak to chcete urobiť, kliknite na tlačidlo hrať.

Pravda, náš imidž urobí len jednu revolúciu. Aby sa obraz neustále otáčal alebo robil niekoľko otáčok, musíte nakonfigurovať parametre cyklovania.

Nastavenie cyklistiky v aplikácii Google Web Designer.

Program umožňuje nakonfigurovať niekoľko možností cyklickosti (opakovania). Takto môžete nastaviť opakovanie pre všetky prvky bannera alebo pre každý prvok samostatne.

Cyklickosť môže byť tiež obmedzená počtom opakovaní alebo môže byť nekonečná.

Na spodnom paneli sa vedľa každého prvku nachádzajú symboly "Hrad", "Oko", "Spätná šípka".

Ak chcete nakonfigurovať cyklickosť, musíte kliknúť na symbol "Spätná šípka". A vyberte si buď obmedzený počet opakovaní alebo nekonečnú možnosť.

Rozhodol som sa opakovať animáciu donekonečna. Pretože v budúcnosti chcem konfigurovať "Diania" takže rotácia sa zastaví, keď podržíte myš a bude pokračovať po odstránení kurzora.

Zastaví rotáciu, keď umiestnite kurzor myši na banner.

V prvom rade nastavíme skratku na prvý kľúčový rámček (druhý v poradí). Ak to chcete urobiť, kliknite pravým tlačidlom myši nad rám a vyberte položku ponuky "Pridať skratku". Zadajte názov skratky a stlačte kláves Enter.

A v ďalšom kroku vyberiete ako prijímač « strana 1". Iné možnosti tam nebudú.

A posledný krok, vyberte skratku, ktorú ste vytvorili v počiatočnej fáze.

Uložte udalosti a skontrolujte. Rotácia bannera sa zastaví, keď podržíte kurzor myši nad rámom, v ktorom bola vytvorená skratka.

Obnovenie otáčania po presunutí kurzora myši preč.

Aby rotácia pokračovala aj po presunutí kurzora do strany, nastavte ďalšiu udalosť.

Je nakonfigurovaný podobne ako predchádzajúci, len s dvoma rozdielmi.

Udalosť je vybratá "myš"— « myš out".

Udalosť – stiahnutie myši

A ako akcia "časová os" — « togglePlay".

Akcia – Pokračovať

Teraz je náš banner s 3D efektom hotový. A môžete vymyslieť toľko rôznych efektov, koľko chcete.

Len nezabudnite nastaviť udalosť pre kliknutie myšou a otvorenie odkazu. Banner predsa nevznikol pre krásu.

Spočiatku sa tento proces môže zdať komplikovaný, ale po niekoľkých banneroch si to už nebudete myslieť.

To je odo mňa dnes všetko, priatelia. Prajem vám všetkým veľa úspechov, teším sa na vaše komentáre a vidíme sa v nových článkoch a videonávodoch.

S pozdravom Maxim Zaitsev.

Vďaka rozvoju webových technológií a moderných prehliadačov dokážeme vytvárať mnohé efekty aj bez nich pomocou Javascriptu. To výrazne uľahčilo život webovým vývojárom. Pretože teraz môžeme vytvárať efekty pomocou čistého CSS bez použitia Javascriptu. Preto vám v tomto článku chcem povedať o tom, či je možné vytvárať bannery pomocou čistého CSS, čo to vyžaduje, ako aj výhody a nevýhody tohto prístupu.

CSS3 poskytuje široké možnosti, len ich treba správne používať. Ako príklad by som rád uviedol odkazy na moje minulé práce „Characters in Pure CSS“:

Najprv chcem uviesť príklady mojich CSS bannerov. Možno ste ich už na stránke videli, no ani ste nevedeli, čo a ako vznikli.

O ukážke: Každý príklad (banner) má v spodnej časti trvanie v sekundách, ako aj tlačidlo „Obnoviť“, ktorým sa banner začne zobrazovať od začiatku.

Banner č. 1 — "Individuálne školenie tvorby webových stránok":

Tento banner som tvoril asi 2 dni. Prečo tak dlho? Pretože prispôsobiť banner (aby bol gumený) pri prepočítavaní súradníc nejaký čas trvalo. V súčasnosti jeho veľkosť závisí od šírky nadradeného bloku (ktorý obsahuje samotný CSS banner).

Tento banner som vytvoril doslova za 2-2,5 hodiny. Jediné, čo tu spomalilo proces tvorby, bol výber ikon. Pretože museli byť vybrané blízko k téme banneru.

Tento banner sa naťahuje aj v závislosti od šírky blokového kontajnera, v ktorom sa nachádza. Vytvorenie trvalo približne 1,5 hodiny.

Tieto bannery vyzerajú veľmi pekne, ale sú naozaj také jednoduché? Pozrime sa na výhody a nevýhody tohto spôsobu tvorby bannerov.

Výhody a nevýhody CSS bannerov:

Ako vytvoriť CSS banner?

1 nápad

Najprv musíte presne vedieť, akú animáciu má banner obsahovať (čo, kam a odkiaľ sa má pohybovať a kde sa má zobraziť). Môžete si vziať hárok A4 a nakresliť, kde sa každý prvok bude pohybovať a čo by malo byť na banneri.

Koniec koncov, nemôžete začať vytvárať banner, ak neviete, čo by mal byť a ako fungovať.

2 Štruktúra HTML

Ďalším krokom je vytvorenie značky HTML, aby bolo možné prvky presúvať (a animovať pre ne). To znamená, že nemôžete robiť všetko s jedným obrázkom, ktorý sa posunie doprava alebo doľava a potom je animácia dokončená.

Typicky existuje jeden spoločný blok, v ktorom sú umiestnené všetky ostatné. A v tomto všeobecnom bloku môžeme spravovať prvky tak, ako potrebujeme.

3 CSS animácia

Posledným krokom je vytvorenie animácií pre bloky, ako aj písanie štýlov pre ne, pretože niektoré časti animácie sú predvolene skryté.

Ak chcete vytvoriť svoj vlastný banner, musíte dobre ovládať základy CSS a HTML.

Naučte sa základné CSS animácie s týmto tutoriálom - .

Záver

Všetky moderné prehliadače podporujú vlastnosti CSS3, čo znamená, že bannery sa v takýchto prehliadačoch budú zobrazovať správne. Ale pomocou JS pluginov môžete vytvárať CSS bannery pre staršie prehliadače. Naučením sa základov CSS animácie pochopíte proces vytvárania bannera a čoskoro vytvoríte svoj prvý čistý CSS banner! 😉

Dnes si vytvoríme banner pomocou CSS3 animácie.

V súčasnosti podporujú animácie CSS iba prehliadače Firefox a WebKit, ale pozrieme sa na to, ako tieto bannery zabezpečiť, aby fungovali aj v iných prehliadačoch (ktoré nazývam prehliadače z 18. storočia). Pri experimentovaní s modernými technológiami CSS by ste však nemali očakávať veľkú podporu vo všetkých prehliadačoch (najmä IE 7 a nižšie).

Poďme teda vytvoriť animované bannery!

Poznámka: Kvôli úspore miesta boli všetky predpony prehliadača odstránené. Celý kód CSS nájdete v zdrojových súboroch. Ak nie ste oboznámení s animáciami CSS, vrelo odporúčamPo prvéprečítaj toto.

HTML značky

Najprv vytvoríme štruktúru bannera na Pomocník HTML. V tomto bode si musíme premyslieť, ako chceme, aby naša animácia fungovala – ako to ovplyvní podriadené a rodičovské prvky v štruktúre nášho označenia (vysvetlím to nižšie):