Ustvarjanje naprednega »Marquee« z animacijo CSS3
Danes si bomo ogledali “šotor” ponovno. Pravzaprav smo o tem razpravljali v prejšnji objavi, ki je govorila o uporabi -webkit-marquee tokrat bomo obravnavali to temo malo dlje.
V tej objavi bomo ustvarili a podoben okvirju učinka z uporabo animacije CSS3. Na ta način bomo lahko dodali še več funkcionalnosti, ki jih ni mogoče doseči le z -webkit-marquee.
Razen če ste že seznanjeni z modulom CSS3 Animacija, vam priporočamo, da si pred nadaljevanjem s to dokumentacijo ogledate naslednje reference:
- CSS3 animacije - W3School
- CSS animacije - Mozilla Dev. Omrežje
Upoštevajte tudi, da CSS3 Animacija trenutno deluje samo v Firefox 8+, Chrome 12+ in Safari 5.0+ s predpono (-moz- in -webkit-). Vendar pa bomo uradno verzijo iz W3C uporabljali samo brez predpone, da bi se izognili prekoračitvi tega članka z odvečno kodo.
Obravnavanje izdaje Marquee
Ena od težav pri označevanju je, da se besedilo nenehno premika. Takšno vedenje moti branje, besedilo pa je tudi težko brati. Tokrat bomo skušali ustvariti lastno različico oznake in jo narediti uporabniku prijaznejšo. Na primer; namesto da se besedilo premika neprekinjeno, ustavili jo bomo, ko bo popolnoma viden, tako da bo uporabnik za trenutek prebral besedilo.
Storyboard (vrsta)
Vsako ustvarjalno in oblikovalno oblikovanje, kot je logotip, ilustracija ali spletna stran, se običajno začne s skico. Na področju produkcije animacije se to izvede s snemalno knjigo. Preden začnemo s katerimkoli kodiranjem, bomo najprej ustvarili nekakšno snemalno knjigo, da nam pomagate vizualizirati našo animacijo.
Kot lahko vidite iz zgornje zgodbe o snemanju, nameravamo prikazati samo dve vrstici besedila, ki se bosta premaknili zaporedno od desne proti levi.
Naša snemalna knjiga ni tako zapletena kot snemalna knjiga za pravi animirani film, vendar je bistvo: zdaj lahko prikažemo, kako bo izgledal naš okvir.
Oznaka HTML
Ker bo naša animacija preprosta, bo tudi oznaka HTML preprosta:
Kako dodati WordPress Podobni Posts brez dodatkov
Avtomatizirajte vaše Dropbox datoteke z dejanji
Osnovni slogi
Preden se lotimo animacije, dodamo nekaj osnovnih slogov. Začnimo z dodajanjem teksture ozadja za html element.
html ozadje: url ('… /images/skewed_print.png'); Nato bomo postavili oznako v središče okna brskalnika in dodali nekaj podrobnosti, kot so notranja senca, barva ozadja in obrobe.
.marquee širina: 500px; višina: 50px; margin: 25px auto; overflow: hidden; položaj: relativna; obroba: 1px solid # 000; margin: 25px auto; barva ozadja: # 222; -webkit-border-radius: 5px; obrobni polmer: 5px; -webkit-box-shadow: vložek 0px 2px 2px rgba (0, 0, 0, 5), 0px 1px 0px rgba (250, 250, 250, .2); box-shadow: vložek 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2);
Potem bomo postavili besedilo - ki je v tem primeru ovito znotraj oznake odstavka - absolutno in od absolutno položaj povzroči, da se element zruši, moramo določiti element širine 100% tako, da pokrije širino svojih staršev.
.šotor p položaj: absolutno; družina pisav: Tahoma, Arial, sans-serif; širina: 100%; višina: 100%; margin: 0; višina vrstice: 50px; text-align: center; barva: #fff; text-shadow: 1px 1px 0px # 000000; filter: dropshadow (barva = # 000000, offx = 1, offy = 1);
Poglejmo si rezultat za nekaj časa.
Na tej točki smo naredili vse osnovne sloge, ki jih potrebujemo; lahko dodate več ali prilagodite sloge. Predlagamo vam, da se držite določene dimenzije (višina in širina) do konca vadnice.
Animacija
Na kratko, animacija je predstavitev premikajočih se predmetov. Vsako gibanje je določeno v časovnem okviru. Torej, ko delamo na animaciji, se večinoma ukvarjamo z Čas. Upoštevamo zadeve, kot so:
- Ko se objekt začne premikati?
- Kako dolgo traja, da se objekt premakne iz ene točke v drugo?
- Kdaj in kako dolgo naj ostane predmet na določeni točki?
V CSS3 Animacija, čas lahko določite z @keyframe skladnjo. Toda, preden skočimo v ta del, najprej določimo začetno pozicijo besedila.
Načrtovali smo, da se bo besedilo začelo z desne, nato pa v desno. Torej ga bomo najprej pozicionirali desno z lastnostjo CSS3 Transformation.
.marquee p transform: translateX (100%);
Ne pozabite 100% ki smo ga definirali za naš odstavek, element je bil enak svojemu nadrejenemu premer. Torej bo tudi tukaj uporabljeno isto; element odstavka bo prevedeno v desno za 100% ki je v tem primeru enaka 500px.
Ključni okvirji
The @keyframe Sintaksa je lahko za nekatere ljudi malce zmedena, zato smo tukaj ustvarili preprost vizualni vodnik, ki vam pomaga zlahka razumeti, kaj se dogaja v @keyframe skladnjo.
Kliknite tukaj za večjo različico.
Celotna animacija bo trajala približno 20 sekund in je razdeljen na dva zaporedja, ki trajajo 10 sekund vsak.
V prvem zaporedju se bo prvo besedilo takoj pomaknilo z desne strani in bo za trenutek ostalo vidno, da bo uporabnik lahko prebral besedilo, drugo besedilo pa bo ostalo skrito. V drugem zaporedju se bo besedilo prvega okvirja pomaknilo na levo, drugo besedilo pa se bo takoj pomaknilo v desno.
Tukaj so vse ključne kode, ki jih moramo uporabiti za izvajanje animacije.
@keyframes left-one 0% transform: translateX (100%); 10% transform: translateX (0); 40% transform: translateX (0); 50% transform: translateX (-100%); 100% transform: translateX (-100%); @keyframes levo-dva 0% transform: translateX (100%); 50% transform: translateX (100%); 60% transform: translateX (0); 90% transform: translateX (0); 100% transform: translateX (-100%);
The levo ključni kadri bodo določili prvo zaporedje animacije, medtem ko bo levo-dva ključni kadri bodo določili drugo zaporedje.
Uporaba animacije za elemente
Da bi animacija delovala, ne pozabite uporabiti animacije na element. Prvo zaporedje se uporablja za prvo besedilo ali v tem primeru prvi odstavek in drugo zaporedje se uporablja tudi za drugi odstavek.
.marquee p: nth-otrok (1) animacija: levi 20-letnik je neskončen; .marquee p: nth-otrok (2) animacija: leva-dva 20-ih sta enostavna;
Vsi smo končali z našo animacijo; Oglejmo si rezultate v brskalniku.
- Demo
- Prenesi vir
Bonus
Prav tako lahko definiramo besedilo za označevanje, ki ga premaknete od zgoraj navzdol ali obratno, prav tako kot v prejšnji objavi. Tukaj je, kako to storiti; nadomestite zgornje kode za animacije s to spodnjo oznako premaknite besedilo navzdol:
.marquee p transform: translateY (-100%); @keyframes down-one 0% transform: translateY (-100%); 10% transform: translateY (0); 40% transform: translateY (0); 50% transform: translateY (100%); 100% transform: translateY (100%); @keyframes navzdol-dva 0% transform: translateY (-100%); 50% transform: translateY (-100%); 60% transform: translateY (0); 90% transform: translateY (0); 100% transform: translateY (100%);
Opazite, da smo spremenili Os X do Y-os in obrni vse prevod negativna vrednost na pozitivno in obratno.
Imamo tudi preimenovala Animacijo do dol in dol-dva, zato moramo ponovno uporabiti ime animacije tudi v elementu odstavka.
.marquee p: nth-otrok (1) animacija: navzdol-ena 20-letnica je neskončna; .marquee p: nth-otrok (2) animation: navzdol-dva 20-ih let je neskončen;
Ali pa, če ga želite premakniti nasprotno; od spodaj navzgor. Tukaj so vse kode, ki jih morate uporabiti:
.marquee.up p transform: translateY (100%); .marquee.up p: nth-otrok (1) animation: up-one 20-ih let je neskončen; .marquee.up p: nth-otrok (2) animation: up-two 20s lahkotno neskončno; @keyframes up-one 0% transform: translateY (100%); 10% transform: translateY (0); 40% transform: translateY (0); 50% transform: translateY (-100%); 100% transform: translateY (-100%); @keyframes up-two 0% transform: translateY (100%); 50% transform: translateY (100%); 60% transform: translateY (0); 90% transform: translateY (0); 100% transform: translateY (-100%);
- Demo
- Prenesi vir
Zaključek
Kljub pomanjkanju trenutne podpore brskalniku, bo CSS3 Animation, če bo pravilno izvedena, nedvomno rešila številna vprašanja uporabnosti v prihodnosti, kot smo to storili v tem primeru. Če potrebujemo samo kratko animacijo, namenjeno sodobnim brskalnikom, je uporaba CSS3 Animacije verjetno boljša od nalaganja jQuery skripta..
Nazadnje se zavedamo, da je ta članek za nekatere ljudi malce pretresen, zato ga, če imate kakršna koli vprašanja v zvezi s tem členom, lahko objavite v razdelku za komentarje spodaj..
