Oprettelse af avanceret Marquee med CSS3 Animation
I dag tager vi et kig på “telt” endnu engang. Vi har faktisk dækket det i vores tidligere indlæg, som talte om at bruge -webkit-telt ejendom, men denne gang vil vi tage dette emne lidt længere.
I dette indlæg skal vi oprette en telt-lignende effekt ved hjælp af CSS3 animationen. På den måde vil vi kunne tilføje flere funktioner, der ikke kunne nås med kun -webkit-telt.
Medmindre du allerede er bekendt med CSS3 Animation-modulet, anbefaler vi, at du kigger på følgende referencer, inden du fortsætter med denne dokumentation:
- CSS3 Animationer - W3School
- CSS Animationer - Mozilla Dev. Netværk
Bemærk også, at CSS3 Animation i øjeblikket kun kan fungere i Firefox 8+, Chrome 12+ og Safari 5.0+ med den forudgående version (-Moz- og -webKit-). Vi vil dog kun bruge den officielle version fra W3C uden præfikset for at undgå at overstuffing denne artikel med overflødige koder.
Adressering af Marquee Issue
Et af problemerne med markeringen er, at teksten løbende bevæger sig. Denne adfærd er forstyrrende for læsning, og teksten er også svært at læse. Denne gang vil vi forsøge at oprette vores egen version af marquee og gøre den brugervenligere. For eksempel; i stedet for at få teksten til at bevæge sig kontinuerligt, vi stopper det, når det er fuldt synligt, så brugeren kan læse teksten et øjeblik.
The Storyboard (slags)
Hver kreativ og designoprettelse, som et logo, en illustration eller et websted, starter normalt med en skitse. Inden for animationsproduktion gøres dette med et storyboard. Før vi starter med en kodning, skaber vi først en slags storyboard, for at hjælpe os med at visualisere vores animation.
Som du kan se fra ovenstående storyboard, planlægger vi kun at vise to linjer med tekst, som begge flytter i rækkefølge fra højre mod venstre.
Vores storyboard er ikke så kompliceret som et storyboard til rigtig animationsfilm, men pointen er: vi kan nu visualisere, hvordan vores telt vil se ud.
HTML Markup
Da vores animation vil være enkel, vil HTML-markeringen også være så simpelt som:
Sådan tilføjes WordPress-relaterede indlæg uden plugins
Automatiser dine Dropbox-filer med handlinger
De grundlæggende stilarter
Før vi arbejder rundt i animationsspillerne, lad os tilføje nogle grundlæggende stilarter. Lad os starte med at tilføje en baggrundsstruktur til html element.
html baggrund: url ('... /images/skewed_print.png'); Dernæst vil vi placere teltet i midten af browservinduet og tilføje nogle detaljer som indre skygge, baggrundsfarve og grænser.
.markør bredde: 500px; højde: 50px; margin: 25px auto; overløb: skjult; stilling: relativ; grænse: 1px fast # 000; margin: 25px auto; baggrundsfarve: # 222; -webkit-grænse-radius: 5px; grænse-radius: 5px; -webkit-box-skygge: indsæt 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2); box-skygge: indsæt 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2);
Derefter vil vi placere teksten - som i dette tilfælde er pakket ind i et afsnit tag - helt og siden absolut position vil få elementet til at falde sammen, vi bliver nødt til at definere breddens element til 100% for at dække sin forældres bredde.
.markør p position: absolut; font-familie: Tahoma, Arial, sans-serif; bredde: 100%; højde: 100%; margen: 0; linjehøjde: 50px; tekst-align: center; farve: #fff; tekstskygge: 1px 1px 0px # 000000; filter: dropshadow (farve = # 000000, offx = 1, offy = 1);
Lad os se på resultatet et stykke tid.
På dette tidspunkt har vi gjort med alle de grundlæggende stilarter, vi har brug for; Du er velkommen til at tilføje flere eller tilpassede stilarterne. Men vi foreslår, at du holder fast i vores specificerede markeringsdimension (højden og bredden) indtil slutningen af vejledningen.
Animationen
Kort sagt er animation en præsentation af bevægelige objekter. Hver bevægelse er defineret i en tidsramme. Så når vi arbejder på animation, handler vi mest om Tid. Vi tager hensyn til spørgsmål som:
- Hvornår begynder objektet at bevæge sig?
- Hvor lang tid tager det for objektet at flytte fra et punkt til et andet?
- Hvornår og hvor længe skal objektet forblive på et givet tidspunkt?
I CSS3 Animation, den tid kan defineres med @keyframe syntaks. Men før vi hopper ind i dette afsnit, lad os først angive startpunktet for markeringsteksten.
Vi har planlagt, at teksten starter fra højre og derefter til højre. Så her vil vi først placere det til højre ved hjælp af CSS3 Transformation egenskaben.
.marquee p transform: translateX (100%);
Husk, at 100% som vi har defineret for vores afsnit element var lig med sin forælder bredde. Så det samme vil også blive anvendt her; stykkeelementet vil være oversat til højre for 100% som i dette eksempel er lig med 500px.
keyframes
Det @keyframe syntax kan være lidt gådefuldt for nogle mennesker, så her har vi lavet en simpel visuel guide til at hjælpe dig med at forstå, hvad der sker i @keyframe syntaks.
Klik her for at se den større version.
Hele animationen varer om 20 sekunder og er opdelt i to sekvenser vedvarende 10 sekunder hver.
I den første rækkefølge vil den første tekst straks glide ind fra højre og forblive synlig øjeblikkelig for at lade brugeren læse teksten, mens den anden tekst forbliver skjult. I den anden rækkefølge glider den første markeringstekst ud til venstre, og den anden tekst glider straks ind fra højre.
Og her er alle de keyframe koder, vi skal anvende for at køre animationen.
@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%);
Det venstre-on keyframes vil definere den første sekvens af animationen, mens left to keyframes vil definere den anden sekvens.
Anvendelse af animation til elementerne
For at animationen skal fungere, skal du ikke glemme at anvende animationen til elementet. Den første sekvens anvendes for den første tekst eller i dette tilfælde første afsnit, og den anden sekvens er også anvendt til andet afsnit.
.marquee p: nth-child (1) animation: left-one 20s lethed uendelig; .marquee p: nth-child (2) animation: left-two 20s lethed uendelig;
Vi er alle færdige med vores animation; lad os se resultaterne i browseren.
- Demo
- Download kilde
Bonus
Vi kan også definere marquee-teksten for at flytte den fra top til bund eller omvendt, ligesom vi gjorde i vores tidligere indlæg. Sådan gør du det; Udskift ovenstående animationskoder med denne nedenfor til flyt teksten nedad:
.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%);
Bemærk, at vi har ændret X-aksen til Y-aksen og vend alle oversættelse negativ værdi til positiv og omvendt.
Vi har også omdøbt til animationen til ned-on og ned-to, så vi skal også anvende animationsnavnet i afsnitelementet også.
.marquee p: nth-child (1) animation: down-one 20s lethed uendelig; .marquee p: nth-child (2) animation: down-two 20s lette uendelig;
Eller hvis du vil flytte det modsatte; fra bunden til toppen. Her er alle de koder du skal anvende:
.marquee.up p transform: translateY (100%); .marquee.up p: nth-child (1) animation: up-one 20s lethed uendelig; .marquee.up p: nth-child (2) animation: up-two 20s lette 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
- Download kilde
Konklusion
På trods af manglen på nuværende browser support, vil CSS3 Animation, hvis det er gjort korrekt, utvivlsomt løse mange brugbarhedsproblemer i fremtiden, som vi har gjort i dette eksempel. Hvis vi kun har brug for en kort animation beregnet til moderne browsere, er det nok bedre at bruge CSS3 Animation end at skulle indlæse et jQuery script.
Endelig er vi klar over, at denne artikel kan være lidt overvældende for nogle mennesker, så hvis du har spørgsmål vedrørende denne artikel, er du velkommen til at skrive den i kommentarfeltet nedenfor.
