Stvaranje naprednog Marquee s CSS3 animacijom
Danas ćemo pogledati “nadstrešnica” ponovno. Mi smo zapravo pokriveni o tome u našem prethodnom postu koji je govorio o korištenju -webkit-nadstrešnica ovog puta, ovaj put ćemo razmotriti ovu temu malo dalje.
U ovom postu kreirat ćemo nadstrešnica poput učinak pomoću CSS3 Animacije. Tako ćemo moći dodati više funkcionalnosti koje se ne mogu postići samo s -webkit-nadstrešnica.
Osim ako ste već upoznati s CSS3 animacijskim modulom, preporučujemo da pogledate sljedeće reference prije nastavka s ovom dokumentacijom:
- CSS3 animacije - W3School
- CSS animacije - Mozilla Dev. Mreža
Također imajte na umu da CSS3 animacija trenutno može raditi samo u preglednicima Firefox 8+, Chrome 12+ i Safari 5.0+ s prefiksnom verzijom (-moz- i -WebKit-). Međutim, službenu verziju iz W3C-a ćemo koristiti samo bez prefiksa da bismo izbjegli prekomjerno punjenje ovog članka suvišnim kodovima.
Rješavanje problema s Marquee
Jedan od problema s natpisom je da se tekst neprestano pomiče. Takvo ponašanje ometa čitanje, a tekst je također teško čitati. Ovaj put pokušat ćemo stvoriti vlastitu verziju oznake i učiniti je korisnijom za korisnika. Na primjer; umjesto da se tekst kreće kontinuirano, zaustavit ćemo ga kada bude u potpunosti vidljiv, tako da korisnik može čitati tekst na trenutak.
Storyboard (vrsta)
Svaka kreativna i dizajnerska izrada, poput logotipa, ilustracije ili web-lokacije, obično započinje skicom. U području produkcije animacije to se radi s ploče scenarija. Prije nego počnemo s bilo kojim kodiranjem, prvo ćemo stvoriti svojevrsna storyboard, kako bi nam pomogli vizualizirati našu animaciju.
Kao što možete vidjeti iz gornje ploče scenarija, planiramo prikazati samo dva retka teksta, koji će se kretati redom s desna na lijevo.
Naša ploča scenarija nije toliko komplicirana kao ploča scenarija za pravi animirani film, ali poanta je u tome: sada možemo vidjeti kako će izgledati naš okvir.
HTML oznaka
Budući da će naša animacija biti jednostavna, HTML oznaka također će biti jednostavna kao:
Kako dodati WordPress Povezani postovi bez dodataka
Automatizirajte vaše Dropbox datoteke s radnjama
Osnovni stilovi
Prije nego što počnemo raditi oko animacije, dodamo nekoliko osnovnih stilova. Počnimo dodavanjem teksture pozadine za hTML element.
html pozadina: url ('… /images/skewed_print.png'); Zatim ćemo postaviti okvir u središte prozora preglednika kao i dodati neke pojedinosti kao što su unutarnja sjena, boja pozadine i obrubi.
.marquee width: 500px; visina: 50px; margina: 25px auto; preljev: skriven; pozicija: relativna; granica: 1px solid # 000; margina: 25px auto; boja pozadine: # 222; -webkit-border-radius: 5px; granični polumjer: 5px; -webkit-box-shadow: umetak 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2); box-shadow: umetak 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2);
Zatim ćemo postaviti tekst - koji je u ovom slučaju omotan unutar oznake odlomka - apsolutno, i od apsolutan položaj će uzrokovati kolaps elementa, morat ćemo definirati element širine 100% tako da pokriva širinu svojih roditelja.
.marquee p položaj: apsolutni; obitelj fontova: Tahoma, Arial, sans-serif; širina: 100%; visina: 100%; margina: 0; visina linije: 50px; poravnavanje teksta: centar; boja: #fff; tekst-sjena: 1px 1px 0px # 000000; filter: dropshadow (boja = # 000000, offx = 1, offy = 1);
Pogledajmo rezultat još neko vrijeme.
U ovom trenutku, učinili smo sa svim osnovnim stilovima koji su nam potrebni; slobodno možete dodati više ili personalizirane stilove. No, predlažemo da se pridržavate navedene dimenzije okvira (visina i širina) do kraja vodiča.
Animacija
Ukratko, animacija je prikaz pokretnih objekata. Svaki se pokret definira u vremenskom okviru. Dakle, kada radimo na animaciji, uglavnom se bavimo Vrijeme. Mi uzimamo u obzir stvari kao što su:
- Kada se objekt počinje kretati?
- Koliko dugo je potrebno da se objekt pomakne iz jedne točke u drugu?
- Kada i koliko dugo bi objekt trebao ostati u određenoj točki?
U CSS3 animaciji, vrijeme može se definirati pomoću @keyframe sintaksa. No, prije skakanja u ovaj odjeljak, prvo odredimo početnu poziciju teksta.
Planirali smo da će tekst početi s desne strane, a zatim se pomaknuti udesno. Dakle, ovdje ćemo ga najprije postaviti na desno pomoću svojstva CSS3 Transformation.
.marquee p transform: translateX (100%);
Zapamtite 100% koje smo definirali za naš stavak element jednak je njegovom roditelju širina. Dakle, isto će se ovdje primijeniti; element stavka bit će preveo na desno za 100% koji je u ovom primjeru jednak 500px.
Ključne sličice
@keyframe Sintaksa je možda za neke ljude zbunjujuća, pa smo ovdje napravili jednostavan vizualni vodič koji će vam pomoći da lako razumijete što se događa u @keyframe sintaksa.
Kliknite ovdje da biste vidjeli veću verziju.
Cijela animacija trajat će oko 20 sekundi i podijeljen je u dvije sekvence koje traju 10 sekundi svaki.
U prvom slijedu, prvi tekst će se odmah pomaknuti s desne strane i ostati vidljiv na trenutak kako bi korisnik pročitao tekst, dok će drugi tekst ostati skriven. U drugom redoslijedu tekst prvog slova će se pomaknuti ulijevo, a drugi tekst odmah će se pomaknuti.
A ovdje su svi ključni kodovi koje moramo primijeniti za pokretanje animacije.
@keyframes lijevo 0% transform: translateX (100%); 10% transform: translateX (0); 40% transform: translateX (0); 50% transform: translateX (-100%); 100% transform: translateX (-100%); @keyframes lijeva-dva 0% transform: translateX (100%); 50% transform: translateX (100%); 60% transform: translateX (0); 90% transform: translateX (0); 100% transform: translateX (-100%);
lijevo-jednom ključni okviri definirat će prvu sekvencu animacije, dok će lijevo-dva ključni okviri definirat će drugi slijed.
Primjena animacije na elemente
Kako bi animacija djelovala, ne zaboravite primijeniti animaciju na element. Prvi slijed primjenjuje se za prvi tekst ili u ovom slučaju prvi stavak, a drugi slijed se primjenjuje i za drugi stavak.
.marquee p: nth-child (1) animacija: lijeva-jedna 20-ih godina je beskonačna; .marquee p: nth-child (2) animacija: lijeva-dva-20-ih godina su beskonačna;
Svi smo završili s našom animacijom; Pogledajmo rezultate u pregledniku.
- Demo
- Preuzimanje izvora
Bonus
Također možemo definirati tekst oznake kako bismo ga premjestili od vrha do dna ili obrnuto, kao što smo to učinili u prethodnom postu. Evo kako to učiniti; zamijenite gore navedene kodove za animaciju s ovom dolje pomaknite tekst prema dolje:
.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 down-two 0% transform: translateY (-100%); 50% transform: translateY (-100%); 60% transform: translateY (0); 90% transform: translateY (0); 100% transform: translateY (100%);
Primijetite da smo promijenili Apscisa do Y-osa i okrenite sve prijevod negativna vrijednost na pozitivnu i obratno.
Također imamo preimenovan u Animaciju do dolje-jedan i dolje dva, stoga moramo ponovno primijeniti ime animacije u elementu stavka.
.marquee p: nth-child (1) animacija: dolje-jedna 20-ih godina je beskonačna; .marquee p: nth-child (2) animacija: dolje-dvije 20-e godine su beskonačne;
Inače, ako ga želite pomaknuti suprotno; od dna prema vrhu. Ovdje su svi kodovi koje trebate primijeniti:
.marquee.up p transform: translateY (100%); .marquee.up p: nth-child (1) animation: up-one 20s lakoća beskonačna; .marquee.up p: nth-child (2) animation: up-two 20s lakoća beskonačna; @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
- Preuzimanje izvora
Zaključak
Unatoč nedostatku trenutačne podrške za preglednike, CSS3 Animation, ako se pravilno provede, nesumnjivo će u budućnosti riješiti mnoge probleme upotrebljivosti, kao što smo to učinili u ovom primjeru. Ako nam je potrebna samo kratka animacija namijenjena suvremenim preglednicima, korištenje CSS3 Animacije je vjerojatno bolje nego učitavanje jQuery skripte.
Konačno, svjesni smo da ovaj članak može biti pomalo neodoljiv za neke ljude, pa ako imate bilo kakvih pitanja u vezi s ovim člankom, slobodno ga postavite u odjeljku komentara.
