Vytváranie pokročilej Marquee s animáciou CSS3
Dnes sa pozrieme na “markíza” ešte raz. V skutočnosti sme sa o tom pokryli v našom predchádzajúcom príspevku, ktorý hovoril o používaní -WebKit-stan majetok, tentokrát to však budeme venovať trochu ďalej.
V tomto príspevku sa chystáme vytvoriť stan-like pomocou animácie CSS3. Týmto spôsobom budeme môcť pridať ďalšie funkcie, ktoré by nebolo možné dosiahnuť len pomocou -WebKit-stan.
Pokiaľ už nie ste oboznámení s modulom animácie CSS3, odporúčame vám pred tým, než budete pokračovať s touto dokumentáciou, prečítajte si nasledujúce odkazy:
- Animácie CSS3 - W3School
- Animácie CSS - Mozilla Dev. sieť
Upozorňujeme tiež, že v súčasnosti môže animácia CSS3 fungovať iba v prehliadačoch Firefox 8+, Chrome 12+ a Safari 5.0+ s predponovanou verziou (-MOZ- a -WebKit-). Avšak budeme používať iba oficiálnu verziu z W3C bez predpony, aby sme predišli prekrveniu tohto článku s nadbytočnými kódmi.
Riešenie problému
Jedným z problémov s markete je to, že text sa neustále pohybuje. Toto správanie narúša čítanie a text je tiež ťažko čitateľný. Tentokrát sa pokúsime vytvoriť vlastnú verziu štýlu a urobiť to priateľskejší. Napríklad; namiesto toho, aby sa text nepretržite pohyboval, zastavíme ho, keď je plne viditeľný, takže používateľ si na chvíľu môže prečítať text.
Storyboard (niečo)
Každá tvorba a tvorba dizajnu, ako logo, ilustrácia alebo webová stránka, zvyčajne začína skicou. V oblasti produkcie animácie sa to deje s storyboardom. Skôr ako začneme s akýmkoľvek kódovaním, najprv vytvoríme akýsi storyboard, aby nám pomohli vizualizovať našu animáciu.
Ako vidíte z vyššie uvedenej scenáre, plánujeme zobraziť len dva riadky textu, ktoré sa budú pohybovať postupne zľava doľava.
Náš storyboard nie je taký komplikovaný ako storyboard pre skutočný animovaný film, ale ide o to, že teraz môžeme predstaviť, ako náš vzhľad bude vyzerať.
Značka HTML
Keďže animácia bude jednoduchá, značka HTML bude tak jednoduchá ako:
Ako pridať WordPress Súvisiace príspevky bez Pluginy
Automatizujte súbory Dropbox s akciami
Základné štýly
Predtým, než začnete pracovať okolo animácie, pridajme niekoľko základných štýlov. Začnime tým, že pridáme textúru pozadia html element.
html (pozadie: url ('... /images/skewed_print.png'); Ďalej umiestnime stĺp v strede okna prehliadača a pridáme aj niektoré detaily ako vnútorné tieň, farbu pozadia a okraje.
.marquee width: 500px; výška: 50px; okraj: 25 pixlov auto; pretečenie: skryté; pozícia: relatívna; hranica: 1px solid # 000; okraj: 25 pixlov auto; farba pozadia: # 222; -webkit-border-radius: 5px; polomer okrajov: 5 pixlov; -webkit-box-shadow: vložiť 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2); box-tieň: vložiť 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2);
Potom budeme umiestňovať text, ktorý je v tomto prípade zabalený do tagu odseku absolútny pozícia spôsobí zrútenie prvku, musíme definovať prvok šírky 100% aby sa pokryla jej šírka rodičov.
.marquee p pozícia: absolútna; font-family: Tahoma, Arial, sans-serif; šírka: 100%; výška: 100%; rozpätie: 0; line-height: 50px; text-align: center; farba: #fff; text-tieň: 1px 1px 0px # 000000; filter: dropshadow (farba = # 000000, offx = 1, offy = 1);
Pozrime sa na výsledok na chvíľu.
V tomto bode sme urobili so všetkými základnými štýlmi, ktoré potrebujeme. môžete pridať viac štýlov alebo ich prispôsobiť. Odporúčame však, aby ste držali našu špecifikovanú dimenziu markízy (výšku a šírku) až do konca tutoriálu.
Animácia
Stručne povedané, animácia je prezentácia pohybujúcich sa objektov. Každý pohyb je definovaný v časovom rámci. Takže, keď pracujeme na animácii, väčšinou sa zaoberáme čas. Berieme do úvahy záležitosti ako:
- Kedy sa objekt začne pohybovať?
- Ako dlho trvá, kým sa objekt presunie z jedného miesta na druhý?
- Kedy a ako dlho by mal objekt zostať v danom bode?
V animácii CSS3, čas môže byť definované pomocou @keyframe syntax. Pred skokom do tejto sekcie však najskôr zadajte východiskovú pozíciu textového označenia.
Plánovali sme, že text sa začne z pravej strany a potom sa presunie doprava. Takže tu budeme najskôr umiestniť to správne pomocou vlastnosti CSS3 Transformation.
.marquee p transform: translateX (100%);
Nezabudnite, že 100% ktoré sme definovali pre náš prvok odstavca, sa rovnal jeho rodičovi šírka. Takže to isté platí aj tu; prvok odseku bude preložené napravo pre 100% čo sa v tomto príklade rovná 500px.
kľúčové snímky
@keyframe syntax môže byť trochu záhadný pre niektorých ľudí, takže tu sme vytvorili jednoduchý vizuálny sprievodca, ktorý vám pomôže ľahko pochopiť, čo sa deje v @keyframe syntax.
Kliknutím sem zobrazíte väčšiu verziu.
Celá animácia bude trvať 20 sekúnd a je rozdelená na dve sekvencie trvajúce 10 sekúnd každý.
V prvej sekvencii bude prvý text okamžite zasunutý doprava a zostane viditeľný na chvíľu, aby používateľ mohol čítať text, zatiaľ čo druhý text zostane skrytý. V druhej postupnosti sa prvý text stĺpca vysunie smerom doľava a druhý text sa okamžite posunie z pravej strany.
A tu sú všetky kódy kľúčových snímok, ktoré potrebujeme na spustenie animácie.
@keyframes left-one 0% transform: translateX (100%); 10% transform: translateX (0); 40% transform: translateX (0); 50% transform: translateX (-100%); 100% transform: translateX (-100%); @ kľúčové slová left_t 0% transform: translateX (100%); 50% transform: translateX (100%); 60% transform: translateX (0); 90% transform: translateX (0); 100% transform: translateX (-100%);
left-one kľúčové snímky definujú prvú sekvenciu animácie, zatiaľ čo ľavý dva kľúčové snímky definujú druhú sekvenciu.
Použitie animácie na prvky
Ak chcete pracovať s animáciou, nezabudnite na prvok použiť animáciu. Prvá sekvencia sa použije pre prvý text alebo v tomto prípade prvý odsek a druhá sekvencia sa použije aj pre druhý odsek.
.marquee p: nth-child (1) animácia: left-one 20s ľahká nekonečná; .marquee p: nth-child (2) animácia: left-two 20s ľahká nekonečná;
Všetci sme hotoví s našou animáciou. uvidíme výsledky v prehliadači.
- demonštrácie
- Stiahnuť zdroj
prémia
Môžeme tiež definovať strihový text a presunúť ho zhora nadol alebo naopak, rovnako ako v predchádzajúcom príspevku. Tu je postup, ako to urobiť; nahraďte naše kódy animácie uvedené nižšie posuňte text smerom nadol:
.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%); @ kľúčové slová nadol - dva 0% transform: translateY (-100%); 50% transform: translateY (-100%); 60% transform: translateY (0); 90% transform: translateY (0); 100% transform: translateY (100%);
Všimnite si, že sme zmenili os X na os Y a otočte všetky preklad zápornú hodnotu na pozitívnu a naopak.
My tiež máme premenoval Animáciu na down-jednom a down-dva, takže musíme znova použiť aj názov animácie v prvku odseku.
.marquee p: nth-child (1) animácia: down-one 20s ľahká nekonečná; .marquee p: nth-child (2) animácia: down-two 20s ľahká nekonečná;
Alebo, ak chcete presunúť to naopak; zdola nahor. Tu sú všetky kódy, ktoré musíte použiť:
.marquee.up p transform: translateY (100%); .marquee.up p: nth-child (1) animácia: up-one 20s ľahké nekonečné; .marquee.up p: nth-child (2) animácia: up-dva 20s ľahko nekonečné; @keyframes up-one 0% transform: translateY (100%); 10% transform: translateY (0); 40% transform: translateY (0); 50% transform: translateY (-100%); 100% transform: translateY (-100%); @ kľúčové slová nahor-dva 0% transform: translateY (100%); 50% transform: translateY (100%); 60% transform: translateY (0); 90% transform: translateY (0); 100% transform: translateY (-100%);
- demonštrácie
- Stiahnuť zdroj
záver
Napriek nedostatku aktuálnej podpory prehliadača, animácia CSS3, ak je správne vykonaná, nepochybne vyrieši veľa problémov použiteľnosti v budúcnosti, ako to urobili v tomto príklade. Ak budeme potrebovať iba krátku animáciu určenú pre moderné prehliadače, používanie animácie CSS3 je pravdepodobne lepšie ako potreba načítať skript jQuery.
Nakoniec si uvedomujeme, že tento článok môže byť pre niektorých ľudí trochu ohromujúci, takže ak máte akékoľvek otázky týkajúce sa tohto článku, neváhajte a uverejnite ho v sekcii komentárov nižšie.
