Opprette avansert Marquee med CSS3 Animation
I dag skal vi ta en titt på “telt” igjen. Vi har faktisk dekket det i vårt tidligere innlegg som snakket om å bruke -webkit-telt eiendom, men denne gangen tar vi dette emnet litt lenger.
I dette innlegget skal vi lage en telt-lignende effekt ved hjelp av CSS3-animasjonen. På denne måten vil vi kunne legge til flere funksjoner som ikke kunne oppnås med bare -webkit-telt.
Med mindre du er kjent med CSS3 Animation-modulen, anbefaler vi at du tar en titt på følgende referanser før du fortsetter med denne dokumentasjonen:
- CSS3 Animasjoner - W3School
- CSS Animasjoner - Mozilla Dev. Network
Legg også merke til at CSS3 Animation for øyeblikket kun kan fungere i Firefox 8+, Chrome 12+ og Safari 5.0+ med den forhåndsdefinerte versjonen (-moz- og -webkit-). Vi vil imidlertid kun bruke den offisielle versjonen fra W3C uten prefiks for å unngå å overstuff denne artikkelen med overflødige koder.
Adressering av Marquee-utgave
Et av problemene med markeringen er at teksten beveger seg kontinuerlig. Denne oppførselen er forstyrrende for lesing, og teksten er også vanskelig å lese. Denne gangen vil vi prøve å lage vår egen versjon av telt og gjøre den brukervennlig. For eksempel; i stedet for at teksten beveger seg kontinuerlig, Vi stopper det når det er fullt synlig, slik at brukeren kan lese teksten et øyeblikk.
The Storyboard (slags)
Hver kreativ og designopprettelse, som en logo, en illustrasjon eller et nettsted, starter vanligvis med en skisse. På animasjonsproduksjonen er dette gjort med et storyboard. Før vi starter på noen koding, vil vi først lage en slags storyboard, for å hjelpe oss med å visualisere animasjonen vår.
Som du kan se fra ovenstående storyboard, planlegger vi å vise bare to linjer med tekst, som begge beveger seg sekvensielt fra høyre til venstre.
Vårt storyboard er ikke så komplisert som et storyboard for ekte animasjonsfilm, men poenget er: vi kan nå visualisere hvordan vår telt ser ut som.
HTML-merkingen
Siden animasjonen vår skal være enkel, vil HTML-oppslaget også være så enkelt som:
Slik legger du til WordPress-relaterte innlegg uten plugins
Automatiser Dropbox-filer med handlinger
Grunnleggende stiler
Før vi jobber rundt animasjonsspillene, la oss legge til noen grunnleggende stiler. La oss starte med å legge til en bakgrunnstekstur for html element.
html bakgrunn: url ('... /images/skewed_print.png'); Deretter plasserer vi markeringen midt i nettleservinduet, og legger til noen detaljer som indre skygge, bakgrunnsfarge og grenser.
.telt bredde: 500px; høyde: 50px; margin: 25px auto; overløp: skjult; posisjon: relativ; grense: 1px solid # 000; margin: 25px auto; bakgrunnsfarge: # 222; -webkit-grense-radius: 5px; border-radius: 5px; -webkit-boks-skygge: innsett 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2); boksskygge: innspill 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2);
Da vil vi plassere teksten - som i dette tilfellet er pakket inn i et avsnittetikett - helt, og siden absolutte posisjon vil føre til at elementet faller sammen, vi må definere breddens element til 100% for å dekke foreldrenes bredde.
.markering p posisjon: absolutt; font-familie: Tahoma, Arial, sans-serif; bredde: 100%; høyde: 100%; margin: 0; linjehøyde: 50px; tekstjustering: center; farge: #fff; tekstskygge: 1px 1px 0px # 000000; filter: dropshadow (farge = # 000000, offx = 1, offy = 1);
La oss se på resultatet en stund.
På dette punktet har vi gjort med alle de grunnleggende stilene vi trenger; Du kan legge til flere eller tilpasse stilene. Men vi foreslår at du holder fast med vår spesifiserte markørdimensjon (høyde og bredde) til slutten av opplæringen.
Animasjonen
Kort sagt, animasjon er en presentasjon av bevegelige objekter. Hver bevegelse er definert i en tidsramme. Så når vi jobber med animasjon, håndterer vi det meste Tid. Vi tar hensyn til saker som:
- Når begynner objektet å bevege seg?
- Hvor lang tid tar det for objektet å flytte fra ett punkt til et annet?
- Når og hvor lenge skal objektet forbli på et gitt punkt?
I CSS3 Animasjon, den tid kan defineres med @keyframe syntaks. Men før vi hopper inn i denne delen, la oss først angi startpunktet for teltteksten.
Vi har planlagt at teksten vil starte fra høyre og deretter flytte til høyre. Så, her vil vi først plassere den til høyre ved hjelp av CSS3 Transformation-egenskapen.
.marquee p transform: translateX (100%);
Husk at 100% som vi har definert for vårt avsnitt element var lik foreldre bredde. Så det samme vil også bli brukt her; avsnittet elementet vil være oversatt til høyre for 100% som i dette eksemplet er lik 500px.
nøkkelbilder
De @keyframe syntaks kan være litt forvirrende for noen mennesker, så her har vi opprettet en enkel visuell guide for å hjelpe deg med å forstå hva som skjer i @keyframe syntaks.
Klikk her for å se den større versjonen.
Hele animasjonen varer om 20 sekunder og er delt inn i to sekvenser som varer 10 sekunder Hver.
I den første sekvensen vil den første teksten øyeblikkelig skyve inn fra høyre og forbli synlig for øyeblikket for å la brukeren lese teksten, mens den andre teksten forblir skjult. I den andre sekvensen vil den første merketeksten glide ut til venstre, og den andre teksten vil umiddelbart skyve inn fra høyre.
Og her er alle keyframe koder vi må søke for å kjøre animasjonen.
@keyframes left-one 0% transform: translateX (100%); 10% transform: translateX (0); 40% transform: translateX (0); 50% transform: translateX (-100%); 100% transform: translateX (-100%); @keyframes left-two 0% transform: translateX (100%); 50% transform: translateX (100%); 60% transform: translateX (0); 90% transform: translateX (0); 100% transform: translateX (-100%);
De venstre-en keyframes vil definere den første sekvensen av animasjonen, mens left-to keyframes vil definere den andre sekvensen.
Bruke animasjon til elementene
For animasjonen til å fungere, ikke glem å bruke animasjonen til elementet. Den første sekvensen blir brukt for den første teksten eller i dette tilfellet første ledd og den andre sekvensen gjelder også for annet ledd.
.marquee p: nth-child (1) animasjon: left-one 20s lett uendelig; .marquee p: nth-child (2) animasjon: venstre-to 20-er lett uendelig;
Vi er alle ferdige med animasjonen vår; la oss se resultatene i nettleseren.
- Demo
- Last ned kilde
Bonus
Vi kan også definere marquee-teksten for å flytte den fra topp til bunn eller omvendt, akkurat som vi gjorde i vårt forrige innlegg. Slik gjør du det; erstatt våre animasjonskoder ovenfor med denne nedenfor til Flytt teksten nedover:
.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%);
Legg merke til at vi har endret X-aksen til Y-aksen og vri alle oversettelse negativ verdi til positiv og omvendt.
Vi har også omdøpt animasjonen til down-en og down-to, så vi må også bruke animasjonsnavnet i avsnittet også.
.marquee p: nth-child (1) animasjon: down-one 20s enkelt uendelig; .marquee p: nth-child (2) animasjon: down-two 20s enkelt uendelig;
Ellers, hvis du vil flytte det motsatte; fra bunn til toppen. Her er alle kodene du må bruke:
.marquee.up p transform: translateY (100%); .marquee.up p: nth-child (1) animasjon: up-one 20s letthet uendelig; .marquee.up p: nth-child (2) animasjon: opp-to 20-er lett uendelig; @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
- Last ned kilde
Konklusjon
Til tross for mangel på nåværende nettleserstøtte, vil CSS3 Animation, hvis det gjøres riktig, utvilsomt løse mange bruksproblemer i fremtiden, som vi har gjort i dette eksemplet. Hvis vi bare trenger en kort animasjon beregnet for moderne nettlesere, er det sannsynligvis bedre å bruke CSS3 Animation enn å måtte laste inn et jQuery-skript.
Til slutt er vi klar over at denne artikkelen kan være litt overveldende for noen mennesker, så hvis du har noen spørsmål angående denne artikkelen, kan du skrive det i kommentarfeltet nedenfor.
