Hogyan hozzunk létre animált szalaghirdetést CSS3 használatával. Érzékeny szalaghirdetések HTML5 és CSS3 formátumban Könnyen létrehozhat szalaghirdetéseket a css3 -ban

Szia, tehát a feladat: „Létrehozás reszponzív HTML banner, amely alkalmazkodni fog különböző méretek képernyőn, a hátralévő idő számlálója és a bezárásához szükséges gomb lesz, és mindezeknek számolniuk kell a kattintásokat is, hogy statisztikákat gyűjtsenek a TT Adriver átmenetéről ”.

Először is kitaláljuk, melyek a legnépszerűbb formátumok az ilyen szalaghirdetések létrehozásakor:

Általánosságban elmondható, hogy sok ilyen banner létezik, itt megismerkedhet az összes technikai követelménysel és formátummal: kattintson, de csak néhányat fogunk használni, mert a többi vagy már nem releváns, vagy majdnem megismétli ezeket:

Teljes képernyős szalaghirdetések - a metróban vagy a wifi webhelyén látható bannerek, ezek a bannerek teljes képernyősre bővülnek, számlálóval és bezáró gombbal rendelkeznek. Az ilyen bannerek létrehozásához egyszerűen készítünk egy statikus képet vagy egy egyszerű gif animáció(legfeljebb 600 KB), majd gépeljen be mindent HTML -ben.
Teljes képernyős szalaghirdetés
A teljes szélességű szalaghirdetések már érdekesebbek, de valójában csak egy szokásos HTML5 -szalaghirdetés, csak a képernyő szélességének 100% -áig terjednek, de rögzített magassággal rendelkeznek. Ezek a szalaghirdetések gyakran animációt használnak, és már olyan programokban készülnek, mint a google webtervező, Adobe Edge Animate, Adobe Animate CC. Személy szerint én aktívan használom az Edge Animate -t, kényelmesebb, gyorsabb és képes gyorsan feltölteni a HTML5 -be. Az ilyen szalaghirdetések létrehozásakor kezdetben storyboardot készítenek a banner megjelenésének lehetőségeivel különböző méretek képernyőn az egész így néz ki:
Banner storyboard 100% szélességben
Banner fix méretű vagy statikus - nos, ez nagyon egyszerű. Itt csak létrehozhat egy kreatívot vagy egy forgatókönyvet, és már csak a kattintások számlálásának kódját kell megírnia. Ilyen bannerek létrehozásához gyakran használok Adobe photoshop vagy az Edge Animate, ha animációról van szó. Soha ne használjon GIF -eket itt! Soha nem tölthet fel legfeljebb 600 KB méretű gif -animációt, és ha az animáció nagyobb, akkor nem marad el. Normál HTML banner nem bírja ki súlyát és 200KB -ig, ami azt jelenti, hogy itt teljes mértékben létrehozhat.

Fix méretű banner storyboard

Útmutató a FullScreen szalaghirdetés létrehozásához az összes szabály szerint

Egy ilyen szalaghirdetés létrehozása azt jelenti, hogy mérete megváltozik, amikor a képernyő mérete megváltozik, ami azt jelenti, hogy a teljes területet elfoglalja, például:

Ez azt jelenti, hogy a képnek minden eszközön egyformán jól kell kinéznie, innen következik, hogy annak kell lennie elég jó minőségű és a mérete közel van négyzet(nincsenek rögzített méretek, itt minden nagyon hűséges). Jelenleg a mobileszközök (mobil) és a táblagépek (táblagépek) irányítanak minket, ezért téglalapot veszünk portré módban (álló). Bemegyünk a Photoshopba, és létrehozunk egy szükséges méretű dokumentumot, ebben az esetben ez az 536x714:

Gif forrás a FullScreen szalaghirdetés létrehozásához

Két keretből készítettem egy gifet, súlya 242 KB, a súlyunknak mindig 600KB -ig kell lennie, ne feledje. Most ezt kell átalakítanunk egy megfelelő HTML bannerré. Nyissa meg a FullScreen szalaghirdetések létrehozására vonatkozó utasításokat, vegye le a műszaki követelményeket és zárja be, nagyon ügyetlenül van írva. Felejtsd el a Flash -t, hősi halált halt, nálunk csak HTML5 van, ezért technikai követelményekre van szükségünk az Ajax kódot használó szalaghirdetések létrehozásához.

Az elrendezésre nincsenek korlátozások, itt szabadon létrehozhatunk, amit csak akarunk, a lényeg az, hogy a fő attribútumok jelen legyenek, nevezetesen: Egy kattintást olvastak a szalaghirdetésből, volt egy számláló és egy kereszt a bezáráshoz. Kódoláshoz használom ingyenes szoftver Magasztos szöveg.

Nyitunk HTML fájl a sablonomból, és nézd meg:

Normál szalaghirdetés -kód teljes képernyős

Bezárás gomb

Hogyan olvasható ki a kattintás a szalaghirdetésből? És miért nem regisztráltunk semmilyen linket azokra az oldalakra, amelyekre a szalaghirdetésnek el kell vezetnie? Tehát ... Az Adriver rendszer lehetővé teszi, hogy linkeket írjon fel az oldalra való belépéshez, miután a bannereket betöltötték a rendszerbe, kiderül, hogy a forráskódunkban csak egy változót írunk elő, amelyet lecserélünk magába a rendszerbe történő betöltéskor, ez már nem a mi dolgunk. Ebben az esetben egy kattintást regisztrálunk az egész tárolóra, amelyben a szalaghirdetésünk található, általában mindenre, amit betettünk

van egy bannerünk, és ebből kattintásokat olvasunk. Más szalaghirdetésekhez, más technikai szálakhoz, és ott másképp olvasható a kattintás, most egy konkrét példán gondolkodunk.

Konténer bannerrel

Más leckékben elmondom, hogyan lehet 100% -os képernyőszélességű szalaghirdetést létrehozni animációval, és hogyan lehet létrehozni és elkészíteni a weboldal elrendezésének elrendezését az összes szabály szerint.

Fájlok a leckéből:

Kész FullScreen szalaghirdetések: kattintson

Köszönöm a figyelmet.

Barátok, üdv mindenkinek. Ma folytatjuk a bannerek készítését google program Webes tervező HTML5 formátumban, 3D -s hatással.

És ez érthető is, a html5 -ben és a css3 -ban létrehozott szalaghirdetések minden képernyőn megjelennek, számítógépen, tévén és mobileszközön egyaránt. Ugyanez nem mondható el a flash bannerekről.

Ezenkívül ezek a szalaghirdetések lehetnek, csak használja, és a szalaghirdetés minden képernyőn jól fog kinézni.

És tekintettel arra a tényre, hogy mobil eszközök egyre többet használnak az internetes források böngészésére, akkor - ez nagyon fontos.

A főt és annak elhelyezését az oldalon már leírtam az utolsó cikkben. Tehát ma a 3D-s effektus létrehozására és a ciklus beállítására fogok összpontosítani (újra megjelenítés). Az „események” néhány beállítását is figyelembe vesszük.

Meglehetősen nehéz ezt az egész folyamatot részletesen leírni, ezért felhívom a figyelmét egy videó bemutatóra. Ez sokkal könnyebbé teszi az anyag elsajátítását. És töltse le az archívumot a banner projektemmel, szemléltető példaként.

Felkészülés egy 3D hatású szalaghirdetés létrehozására.

A banner végső megjelenése az előkészítéstől függ. A Google Web Designer szerkesztő lehetővé teszi reális 3D effektusok létrehozását, és mindezt be kell írni html kód, csak mindent helyesen kell összeállítania a vizuális szerkesztőben.

Kiváló minőségű 3D-effektus létrehozásához először ki kell vágnia az üres helyeket a Photoshopban, amelyet a jövőben rögzíteni kell a Google Web Designer alkalmazásban.

Példaként a következő üres részeket készítettem el:

Ezeket az üres részeket Photoshopban készítettem, de sok hasonló kép található az interneten. Nem kell megerőltetnie magát, hanem kész lehetőségeket kell választania.

Megjegyzés: Ha érdekli az ilyen sablonok létrehozásának folyamata, írjon róla a megjegyzésekben.

Fontos figyelembe venni a szalaghirdetés általános összetételét és forgatókönyvét is. Ettől függ, hogy a zászlót hogyan fogják felfogni.

3D objektum létrehozása a Google Web Designer alkalmazásban.

Tehát az utolsó cikkhez hasonlóan indítsa el a szerkesztőt, hozzon létre egy új projektet.

A 3D effektus összetett képet jelent, vagyis olyan képet, amely több darabból áll a kívánt vetületben.

Ezeket a több képet vagy csoportba kell egyesíteni, vagy DIV blokkba kell helyezni. És így és így lesz helyes. De nekem kényelmesebb a DIV oldallal dolgozni.

1. lépés: Hozzon létre egy DIV blokkot.

Tehát a DIV blokk létrehozásához a bal oldali panelen válassza a lehetőséget "Eszköz a címkék kezeléséhez (D) ".

Feltétlenül rendeljen azonosítót. És méretezze át a részt "Tulajdonságok" a jobb oldali ablaktáblában.

Most ki kell választanunk a blokkot. Ehhez válassza ki a bal oldali ablaktáblában "Kiválasztó eszköz (V) "és kattintson duplán a bal egérgombra, és kattintson a DIV blokk keretére. Ugyanakkor a színe vörösre változik.

2. lépés. Rendezze el a képeket.

És most kezdődik a legfáradságosabb folyamat. Szükséges egyetlen kép összes elemét feltárni.

A következő elemek állnak a rendelkezésemre:

- Felső oldal.

- Oldalsó (három különálló részből áll).

Először helyezze el a kép hátsó (hátsó) oldalát, és igazítsa a szalaghirdetés középső és felső széléhez.

Hasonló módon adja hozzá az elülső oldalt. Igazítás és eltolás a Z tengely mentén.

Mivel az oldal szélessége 4 képpont (képpont), az elülső és a hátsó oldalt a Z tengely mentén 2 képpontos és -2 képpontos mozgatással mozgattam. Ami rést biztosít a képek között.

Megjegyzés: a pontos elmozdulási adatokat lásd a képernyőképeken.

Ezután adja hozzá az oldalt, az összes darabot külön -külön. Az elhelyezés megkönnyítése érdekében használjon szerszámokat "3D forgó munkaterület "és "Skála"... Segítenek abban, hogy pontosan illeszkedjen az összes részlethez.

Először is azt javaslom, hogy sorolja fel az összes képet az egyik oldalon, majd másolja le őket, és helyezze őket a másik oldalon lévő tükörképbe.

A következő lépés a bal felső sarok felépítése.

Most az oldal középső része.

És az alsó sarok a bal oldalon van.

Ügyeljen arra, hogy az oldal minden elemét illessze az Y tengelyhez 90 0-nál.

Most át kell másolnia a kívánt réteget, és újra be kell illesztenie, át kell neveznie és módosítania kell a helyparamétereket, így megkapjuk a jobb oldal elemeit.

Ehhez válasszon ki egy képet az alsó panelen - nyomja meg a CTRL + C (másolás) billentyűkombinációt, és illessze be a CTRL + V ismétlődő példányát.

Kezdjük ugyanúgy, mint a mezőoldalról felülről lefelé, de csak jobbra.

Jobb felső kupak.

Az alsó részt nem én készítettem, mivel nem látszik a képen.

A legnehezebb munka véget ért. Most megkezdheti az animáció testreszabását. Vizuális demonstrációként forgassuk el a képet.

Forgatási effektus létrehozása a Google Web Designer alkalmazásban.

Az első lépés az, hogy kilépünk a DIV blokkból, amely az összes képelemet tartalmazza. Vagyis a blokkon belül konkrét képekkel dolgoztunk, és most az összes képpel egyszerre kell dolgoznunk, irányítva a DIV blokkot.

Először kattintson a DIV gombra az alsó panelen.

Tehát az idő faházában az egér jobb gombjának megnyomásával két kulcsképet hoz létre. Ennek így kell kinéznie:

Állítsa be a forráskeret helyét az Y skálán -90 0 -ra.

Állítsa be az első kulcsképkockát (a második a sorban) az Y skálán 0 0 -ra.

A második kulcskeret (a sorban a harmadik) az Y skálán 90 0 -ra van állítva.

Minden ellenőrizhető az eredményen. Ehhez kattintson a gombra Játék.

Igaz, a képünk csak egy fordulatot tesz meg. Annak érdekében, hogy a kép folyamatosan forogjon, vagy több forgatást végezzen, be kell állítania a ciklikus paramétereket.

A hurok beállítása a Google Web Designer alkalmazásban.

A programban több opciót is beállíthat a ciklikusságra (ismétlések). Így beállíthatja az ismétlést a szalaghirdetés minden elemére vagy minden elemre külön -külön.

Ezenkívül a ciklikusság korlátozható az ismétlések számával, vagy végtelenné tehető.

Az alsó panelen minden elem mellett szimbólumok találhatók "Vár", "Szem", "Vissza nyíl".

Tehát a ciklus beállításához kattintson a szimbólumra "Fordított nyíl".És válasszon korlátozott számú ismétlést vagy végtelen lehetőséget.

Az animáció végtelen ciklusát választottam. Mivel a jövőben szeretnék konfigurálni "Fejlesztések" oly módon, hogy az elforgatás leáll, amikor az egérmutatót lebegteti, és a kurzor eltávolítása után folytatódik.

Állítsa le a forgatást, amikor az egérmutatót a szalaghirdetés fölé viszi.

Először állítson be egy parancsikont az első kulcskeretben (a sorban a második). Ehhez nyomja meg a jobb egérgombot a keret felett, és válassza ki a menüpontot "Parancsikon hozzáadása"... Írja be a parancsikon nevét, és nyomja meg az Enter billentyűt.

És tovább következő lépés fogadóként választani « 1 oldal "... Ott nem lesz más lehetőség.

És az utolsó lépésben válassza ki a kezdeti szakaszban létrehozott parancsikont.

Mentse az eseményeket és ellenőrizze. A szalagcím forgatása leáll, ha az egérmutatót arra a keretre helyezi, ahol a parancsikon készült.

Forgatás folytatása az egérmutató mozgatása után.

Annak érdekében, hogy a forgatás folytatódjon, miután a kurzort oldalra helyezte, állítson be még egy eseményt.

Az előzőhöz hasonlóan van konfigurálva, csak két különbség van.

Az esemény kiválasztva "Egér"— « egér ".

Esemény - egérrablás

És akcióként Idővonal — « togglePlay ".

Akció - Folytatás

Elkészült a 3D hatású bannerünk. És tetszőleges számú effektet hozhat létre.

Csak ne felejtsen el eseményt csinálni egy egérkattintásra és linknyitásra. A zászlót nem a szépség kedvéért hozták létre.

Kezdetben ez a folyamat bonyolultnak tűnhet, de néhány banner elkészítése után már nem fog látszani.

Ma nekem ennyi, barátaim. Sok sikert kívánok, várom a hozzászólásokat, és találkozunk az új cikkekben és videó oktatóanyagokban.

Üdvözlettel: Maxim Zaitsev.

Ma egy bannert készítünk CSS3 animáció segítségével.

Jelenleg csak a Firefox és a WebKit böngészők támogatják a CSS animációt, de megvizsgáljuk, hogyan tudjuk ezeket a szalaghirdetéseket más böngészőkben is működtetni (ezeket én 18. századi böngészőknek nevezem). A modern CSS -technológiákkal való kísérletezés során azonban nem számíthat nagy támogatásra minden böngészőben (különösen az IE 7 és régebbi verzióiban).

Készítsünk tehát animált bannereket!

Kérjük, vegye figyelembe: A helytakarékosság érdekében minden böngésző előtagot eltávolítottunk. Cm. forrás fájlok az összes CSS megtekintéséhez. Ha nem ismeri a CSS animációt, nagyon ajánlomelőször isolvassa el ezt.

HTML jelölés

Először a banner struktúrát hozzuk létre HTML súgó... Ezen a ponton el kell gondolkodnunk azon, hogyan szeretnénk, hogy az animációnk működjön - hogyan fogja ez befolyásolni a gyerekeket és a szülőket a jelölésünk szerkezetében (ezt alább kifejtem):

> Elveszett a tengeren? >
> Nyugi - megvan a kormányod. >
>

>
>

>
>

>
>
>

A jelölésünk szerkezetének megértéséhez koncentráljunk egy pillanatra a hajóra:

>
>
>

Most nézzük meg a demo oldal első szalaghirdetését. Három külön animáció játszódik a hajón:

Animáció - amikor a hajó balra csúszik. Ez közvetlenül a rendezetlen listára (hajóelemek csoportjára) vonatkozik.
Animáció - amely ringató hatást kölcsönöz a hajónak, szimulálva a vízen úszó hajót. Ez közvetlenül vonatkozik a listaelemekre (a hajóra).
Animáció - amely elrejti a kérdőjelet. Ez vonatkozik a div-re (kérdőjel).

Ha nem vagy tengeribeteg, akkor nézd meg még egyszer a demo oldalt. Látni fogja, hogy a listaelemre (hajóra) alkalmazott animáció, amely a hajót felemeli, a benne lévő DIV -re is hat (kérdőjellel). Ezenkívül a rendezetlen listára (csoportra) alkalmazott "dia be" animáció a listaelemre és a benne lévő DIV -ekre (a hajóra és a kérdőjelre) is hatással van. Ezzel fontos megfigyelésekhez jutunk:

A gyermekelemek saját animációjuk mellett örökölik az animációt a szüleiktől. Ezt a tudást hozzáadtuk az arzenálunkhoz, de az animáció készítésekor a gyermekek / szülők száma felrobbantja a fejét (és a nagymama laptopjának processzorát)!

CSS

Mielőtt belekezdenénk az igazán menő dolgokba, és elkezdenénk animációkat készíteni, még mindig stílusokat kell létrehoznunk a böngészők számára, amelyek a 18. században ragadtak.

Tartalék stílusok a régebbi böngészőkhöz

Csak olyan tartalék stílusokat hozunk létre, mintha nem létezne CSS -animáció (a gondolat, hogy a CSS -animáció nem létezik, minden felnőttet nemcsak sírni fog, hanem mellettem is lógni :)). Más szóval, ha az animációnkat nem sikerül lejátszani, a szalaghirdetésnek továbbra is tisztességesnek kell lennie. Így, ha valaki egy szalaghirdetést megtekint egy régi böngészővel, akkor normál, statikus szalaghirdetést fog látni az üres hely helyett.

Például: ha valaki ilyen CSS -t használ, akkor problémák merülnek fel:

/* ROSSZ IRÁNY! * /

0% (átlátszatlanság: 0;)
100% (átlátszatlanság: 1;)
}

Div (
opacitás: 0; / * Ez a blokk alapértelmezés szerint rejtve van! * /

}

Ha a felhasználó böngészője nem támogatja az animációt, a szalaghirdetés láthatatlan marad számára. És akkor az ügyfél betöri az ajtót az eladó irodájában - láncfűrésszel a kezében -, és követeli, hogy magyarázzák el neki, miért nem adták el a termékét! És ha nem tudják megérteni, hogy a böngésző ilyen nyomorúságos lehet, életük borzalmasan véget ér, és utolsó szavaik átkok lesznek az Internet Explorer ellen ... :)

De ne aggódjon, fejlett böngészőtámogatást biztosítunk:

/* A HELYES ÚT */

@keyframe animációnk elhalványulása (
0% (átlátszatlanság: 0;)
100% (átlátszatlanság: 1;)
}

Div (
opacitás: 1; / * ez a div alapértelmezés szerint látható lesz * /
animáció: mi-fade-in-animation 1s 1;
}

Amint láthatja, a DIV akkor is megjelenik, ha az animáció nem játszható le. Ha az animáció lejátszható, akkor a DIV azonnal el lesz rejtve, és az animáció a végéig lejátszódik.

Most, hogy tudjuk, hogyan tehetjük animált szalaghirdetéseinket régebbi böngészők támogatására, térjünk át néhány alapvető CSS -re.

Három kulcsfontosságú dolgot kell szem előtt tartani:

Mivel ezek a hirdetések különböző webhelyeken használhatók, minden css stílusunkat nagyon specifikussá tesszük... Elkezdjük minden választót deklarálni az azonosítóval: # ad-1. Ez megakadályozza, hogy szalaghirdetési stílusaink zavarják a meglévő stílusokat és elemeket.
Céltudatosak leszünk figyelmen kívül hagyja az animáció késleltetési funkcióját animációnk létrehozásakor. Ha az animáció késleltetési funkcióját és az elemeinket a megfelelő módon terveznénk (alapértelmezés szerint látható), akkor mindez látható lenne a képernyőn, mielőtt az animáció végre elkezdődne. Ezért indul el azonnal az animáció, amely lehetővé teszi számunkra, hogy elrejtsük az elemeket a képernyőről, amíg szükségünk van rájuk. Az animáció késését szimuláljuk az időtartam növelésével és a kulcsképek manuális beállításával. Látni fog erre példákat, amikor elkezdünk animációkat készíteni.
Ha lehetséges, használjon egy animációt több elemhez... Így sok időt spórolhatunk meg, és csökkenthetjük a kódterjedést. Ugyanazon animációban több különböző hatást is létrehozhat az időtartam és az átmenetek beállításával.

Tehát elkezdjük létrehozni a szalaghirdetésünket. Győződjünk meg arról, hogy relatív helyzetben van (pozíció: relatív), hogy a benne lévő elemek helyesen legyenek elhelyezve. Arról is gondoskodnunk kell, hogy a overflow: hidden tulajdonság elrejtse a felesleges dolgokat:

# ad-1 (
szélesség: 720 képpont;
magasság: 300 képpont;
balra lebeg;
margó: 40 képpont auto 0;
háttérkép: url (../images/ad-1/background.png);
háttér-helyzet: középen;
háttér-ismétlés: nincs ismétlés;
túlcsordulás: rejtett;
pozíció: rokon;
box-shadow: 0px 0px 6px # 000;
}

# ad-1 #content (
szélesség: 325 képpont;
úszó: jobb;
margó: 40 képpont;
text-align: center;
z-index: 4;
pozíció: rokon;
túlcsordulás: látható;
}
# ad-1 h2 (
font-family: "Alfa Slab One", kurzív;
szín: # 137dd5;
betűméret: 50 képpont;
vonalmagasság: 50 képpont;

animáció: delayed-fade-animation 7s 1 könnyű be-ki; / * A H2 elhalványul a szimulált animációs késleltetéssel * /
}
# ad-1 h3 (

szín: # 202224;
betűméret: 31 képpont;
vonalmagasság: 31 képpont;
text-shadow: 0px 0px 4px #fff;
animáció: delayed-fade-animation 10s 1 easy-in-out; / * A H3 elhalványul a szimulált animációs késleltetéssel * /
}
# ad-1 űrlap (
margó: 30px 0 0 6px;
pozíció: rokon;
animáció: űrlap-animáció 12s 1 egyszerű be-ki; / * Ez a kód mozgatja e -mail űrlapunkat * /
}
# ad-1 #email (
szélesség: 158 képpont;
magasság: 48 képpont;
balra lebeg;
párnázás: 0 20px;
betűméret: 16 képpont;
font-family: "Lucida Grande", sans-serif;
szín: #fff;
text-shadow: 1px 1px 0px # a2917d;
border-left-sugar-sugar: 5 képpont;
szegély-bal alsó sugár: 5 képpont;
szegély: 1 képpont szilárd # a2917d;
vázlat: nincs;
box -shadow: -1px -1px 1px #fff;
háttérszín: # c7b29b;
háttérkép: lineáris gradiens (alsó, rgb (216, 201, 185) 0%, rgb (199, 178, 155) 100%);
}
# ad-1 #email: focus (
háttérkép: lineáris gradiens (alsó, rgb (199, 178, 155) 0%, rgb (199, 178, 155) 100%);

}
# ad-1 #submit (
magasság: 50 képpont;
balra lebeg;
kurzor: mutató;
párnázás: 0 20px;
betűméret: 20 képpont;
font-family: "Boogaloo", kurzív;
szín: # 137dd5;
text-shadow: 1px 1px 0px #fff;
border-top-right-sugar: 5 képpont;
szegély-alsó-jobb-sugár: 5 képpont;
szegély: 1 képpont szilárd # bcc0c4;
border-left: nincs;
háttérszín: #fff;
háttérkép: lineáris gradiens (alsó, rgb (245, 247, 249) 0%, rgb (255, 255, 255) 100%);
}
# ad-1 #submit: hover (
háttérkép: lineáris gradiens (alsó, rgb (255, 255, 255) 0%, rgb (255, 255, 255) 100%);
}

Most formáljuk a vizet és ennek megfelelően animáljuk:

# ad-1 ul # víz (
/ * Ha egy másik animációt szeretnénk hozzáadni a vízhez (például vízszintesen mozogva), akkor itt megtehetjük * /
}
# ad-1 li # water-back (
szélesség: 1200 képpont;
magasság: 84 képpont;
háttérkép: url (../images/ad-1/water-back.png);

z-index: 1;
pozíció: abszolút;
alsó: 10 képpont;
bal: -20 képpont;
animáció: víz-vissza-animáció 3s végtelen könnyű be-ki; / * Víz pattogó hatás * /
}
# ad-1 li # vízparti (
szélesség: 1200 képpont;
magasság: 158 képpont;
háttérkép: url ( ../images/ad-1/water-front.png) ;
háttér-ismétlés: ismétlés-x;
z-index: 3;
pozíció: abszolút;
alsó: -70 képpont;
bal: -30px;
animáció: víz-front-animáció 2s végtelen egyszerű be-ki; / * A víz visszapattanásának másik hatása kissé más. Az animációt egy kicsit gyorsítjuk, hogy valamiféle perspektívát hozzunk létre. * /
}

Most formázzuk a hajót és annak minden elemét. Ismét hívjuk a megfelelő animációt:

# ad-1 ul # csónak (
szélesség: 249 képpont;
magasság: 215 képpont;
z-index: 2;
pozíció: abszolút;
alsó: 25 képpont;
bal: 20 képpont;
túlcsordulás: látható;
animáció: boat-in-animation 3s 1 könnyítés; / * Először mozgassa a csoportot * /
}
# ad-1 ul # boat li (
szélesség: 249 képpont;
magasság: 215 képpont;
háttérkép: url (../images/ad-1/boat.png);
pozíció: abszolút;
alsó: 0px;
bal: 0px;
túlcsordulás: látható;
animáció: csónak-animáció 2s végtelen egyszerű be-ki; / * A vízen imbolygó hajó szimulációja - hasonló animációt már használnak magának a víznek is. * /
}
# ad-1 # kérdőjel (
szélesség: 24 képpont;
magasság: 50 képpont;
háttérkép: url ( ../images/ad-1/question-mark.png) ;
pozíció: abszolút;
jobbra: 34 képpont;
felső: -30 képpont;
animáció: delayed-fade-animation 4s 1 könnyű be-ki; / * A kérdőjel elrejtése * /
}

Végül stílusosítjuk a felhőcsoportot és egy felhőt. Hívunk egy szép animációt is, amely folyamatos görgetési hatást biztosít számukra. Íme egy illusztráció arról, hogy mi fog történni:

Ezek a stílusok a következők:

# ad-1 # felhők (
pozíció: abszolút;
felső: 0px;
z-index: 0;
animáció: felhőanimáció 30-as évek végtelen lineáris; / * Mozgassa a felhőket balra, végtelen számú alkalommal * /
}
# ad-1 # cloud-group-1 (
szélesség: 720 képpont;
pozíció: abszolút;
bal: 0px;
}
# ad-1 # cloud-group-2 (
szélesség: 720 képpont;
pozíció: abszolút;
bal: 720 képpont;
}
# ad-1 .cloud-1 (
szélesség: 172 képpont;
magasság: 121 képpont;
háttérkép: url (../images/ad-1/cloud-1 .png);
pozíció: abszolút;
felső: 10 képpont;
bal: 40 képpont;
}
# ad-1 .cloud-2 (
szélesség: 121 képpont;
magasság: 75 képpont;
háttérkép: url (../images/ad-1/cloud-2 .png);
pozíció: abszolút;
felső: -25 képpont;
bal: 300 képpont;
}
# ad-1 .cloud-3 (
szélesség: 132 képpont;
magasság: 105 képpont;
háttérkép: url (../images/ad-1/cloud-3 .png);
pozíció: abszolút;
felső: -5 képpont;
bal: 530 képpont;
}

Ufff! Itt sok CSS kód volt. De a móka következik!

Élénkség

Ne feledje: Eddig a pillanatig valójában nem volt animáció. Ha most megnézné a szalaghirdetést, olyat látna, amit még egy régi böngésző is megjelenít - egy statikus hirdetést. VAL VELMostvalójában létrehozzuk azt az animációt, amelyet a CSS kódunkban már meghívtunk.

Most, hogy a szalaghirdetésünk jól jelenik meg, animáljuk ezt a statikus hirdetést! Menjünk egyenesen a kódhoz - megjegyzésekben elmondom, mi fog történni:

Következtetés

Ennek az oktatóanyagnak a során megtanultuk az animációk létrehozásának legfontosabb pontjait a régebbi böngészők támogatásával:

A gyermekelemek saját animációik mellett örökölnek animációkat a szüleiktől. Ezzel bonyolultabb animációkat készíthetünk.
Hirdetési stílusainkhoz nagyon speciális választókat kell használnunk, hogy hirdetéseinket ne írják felül más webhelystílusok.
Úgy kell kialakítanunk az elemeket, hogy ha az animációnk nem játszódik le, a hirdetésnek továbbra is tisztességesnek kell lennie.
Amikor csak lehetséges, egy animáció több elemhez történő használata időt takarít meg, és megakadályozza a kód terjedését.
Gyakran nevezzük az Internet Explorert "18. századi böngészőnek", és undorodva és haraggal rázzuk az öklünket. :)

Sok sikert a CSS kísérletekhez.

Kétségkívül az egyik legfényesebb trendek 2012 folyamatban van a fejlesztés CCS3, HTML5. Ma nagy és nagyon hasznos áttekintést nyújtunk a példákról. " 20+: kreatív és hasznos CSS3 oktatóanyagok ″ címen javasolt SpeckyBoy... Minden példa elkészül tiszta JavaScript nélkül, a bemutatott oktatóanyagokban demók és letölthető kész CSS3 fájlok találhatók.

Biztosak vagyunk abban, hogy ezek a technikák és technikák hasznosak lesznek a webfejlesztők számára!

CSS3 leckék :

1. CSS3 fotógalériák, csúszkák, képhatások

1.1 CSS3 csúszka

Nem hiszem el, de ez a különböző effektusokkal rendelkező csúszka kizárólag CSS3 -ban készült, nagyon lenyűgöző.

1.2. Teljes képernyő háttér CSS3 csúszkával

A webes tervezők már régóta kísérleteznek különböző háttérrel az oldalon, de továbbra is tiszta CSS nagyon keveset tehettél, a JS -t kellett használnod. Most a CSS3 lehetővé teszi, hogy tetszés szerint kezelje webhelye hátterét - egy háttérrel rendelkezhet egy jó minőségű fotóval, több hátteret is módosíthat különböző hatásokkal, és a háttér skálázhatósága a képernyőtől függően paramétereket. Összességében csodálatos lehetőség a kreatív webhelyek számára.

1.3. Lightbox CSS3 -on

Ezzel az oktatóanyaggal megtanulhatja, hogyan hozhat létre fényhatást különféle effektusokkal tiszta CSS -ben.

1.4. CSS3 képtulajdonságok

Ez az oktatóanyag a CSS3 új funkcióit mutatja be a képtulajdonságokhoz, például lekerekített sarkokhoz, árnyékokhoz és egyéb effektekhez.

1.5. Animált CSS3 szalaghirdetés

1.6 CSS3 betöltősáv

1.7. 3D szalag CSS3 -ban

Tekintse meg a bemutatót vagy töltse le a CSS3 kódfájlokat →

2. CSS3 menük, navigáció és gombok

2.1. Apple.com menük CSS3 -ban

Ismerje meg, hogyan hozhatja létre a híres Apple.com menüt CSS3 segítségével.

2.2. Animált vízszintes menü a CSS3 -ban

Egy egyszerű bemutató, amely bemutatja, hogyan lehet animált CSS3 menüt készíteni különböző effektekkel.

2.3. Animált függőleges menü a CSS3 -ban

2.4. Animált CSS3 gombok

Nagyszerű bemutató 7 példával az animált kreatív gombokra.

2.5. Kreatív animált menü CSS3 képekkel

Ebben a leckében csak szemek futnak fel a bemutatott 10 példától. Az ilyen összetett kreatív menüket korábban kizárólag a JS használatával hozták létre. Hatásos!

2.6. Kör navigációs effektus CSS3 -mal

Szokatlan hatás, ha a kijelölt navigációs elem fölé viszi az egeret egy kör alakú képpel. Írd fel!

2.7. A CSS3 legördülő menüje

Oktatóanyag egy egyszerű legördülő menü CSS3 alszinttel történő megvalósításához.

2.8. CSS3 navigáció animált átmenetekkel

3. Különböző hatások a CSS3 -ra

3.1. Animált eszköztipp a CSS3 -ban jQuery nélkül

A webes technológiák és a modern böngészők fejlődésének köszönhetően számos effektust tudunk létrehozni Javascript használata nélkül. Ez nagyban megkönnyítette a webfejlesztők életét. Végtére is, most létrehozhatunk effekteket tiszta CSS -ben, Javascript használata nélkül. Ezért ebben a cikkben szeretnék arról mesélni, hogy lehetséges -e bannerek készítése tiszta CSS -ben, mi szükséges ehhez, valamint ennek a megközelítésnek az előnyei és hátrányai.

A CSS3 számos lehetőséget kínál, csak helyesen kell használni őket. Példaként linkeket szeretnék adni a "Characters in pure CSS" című korábbi munkámhoz:

Először is példákat szeretnék mondani a CSS szalaghirdetéseimre. Talán már látta őket az oldalon, de azt sem tudta, hogy mit és hogyan hoztak létre.

A demóról: minden példa (szalaghirdetés) időtartama másodpercben van az alján, valamint van egy "Frissítés" gomb, amely az elejétől kezdi megjeleníteni a szalaghirdetést.

Banner # 1 - "Egyéni képzés a helyszínépítésben":

Ezt a bannert körülbelül 2 napig készítettem. Miért olyan hosszú? Mert a transzparens adaptálása (hogy gumi legyen) a koordináták újraszámításakor eltartott egy ideig. Most mérete a szülőblokk szélességétől függ (amely magában foglalja a CSS szalaghirdetést).

Ezt a bannert mindössze 2-2,5 óra alatt készítettem el. Az egyetlen dolog, ami lelassította a létrehozási folyamatot, az ikonok megválasztása volt. Mert a banner témához közel kellett őket kiválasztani.

Ez a szalaghirdetés a blokktároló szélességétől függően is kinyúlik, amelyben található. Létrehozása körülbelül 1,5 órát vett igénybe.

Ezek a bannerek nagyon jól néznek ki, de minden ilyen egyszerű? Nézzük meg a bannerek létrehozásának ezen módjának előnyeit és hátrányait.

A CSS bannerek előnyei és hátrányai:

Hogyan hozhatok létre CSS szalaghirdetést?

1 Ötlet

Először is pontosan tudnia kell, hogy milyen animációval kell rendelkeznie a szalaghirdetésnek (mit, hol és hova kell mozgatnia, és hol kell megjelennie). Foghat egy A4 -es lapot, és rajzolhatja, hogy az egyes elemek hol mozognak, és mi legyen a szalaghirdetésen.

Végül is nem kezdheti el a szalaghirdetés létrehozását, ha nem tudja, mi legyen és hogyan kell működnie.

2 HTML szerkezet

A következő lépés a HTML -jelölés létrehozása, hogy az elemek mozgathatók (és animálhatók legyenek). Vagyis nem tud mindent megtenni egyetlen képpel, amely jobbra vagy balra mozog, és itt vége az animációnak.

Általában van egy közös blokk, amelyben az összes többi található. És ebben az általános blokkban az elemeket szükség szerint kezelhetjük.

3 CSS animáció

Az utolsó lépés az, hogy animációt készítünk a blokkokhoz, valamint írási stílusokat, mert az animáció egyes részei alapértelmezés szerint rejtve vannak.

A szalaghirdetés létrehozásához jól kell ismernie a CSS és a HTML alapjait.

Ismerje meg az alapvető CSS animációt ezzel az oktatóanyaggal -.

Kimenet

Minden modern böngészők támogatja a CSS3 tulajdonságokat, ami azt jelenti, hogy a szalaghirdetések helyesen jelennek meg az ilyen böngészőkben. De a JS bővítmények segítségével létrehozhat CSS szalaghirdetéseket a régebbi böngészők számára. Miután megtanulta a CSS animáció alapjait, megérti a bannerek létrehozásának folyamatát, és hamarosan elkészíti első bannerjét tiszta CSS -ben! 😉