Innhold
Ved å kombinere både CSS3-animasjon og overganger bruker vi CSS til å animere en tidslinjeinfografikk. For at dataene skal utfolde seg mens du ruller nedover tidslinjen, blir hver animasjon utløst via inview jQuery-pluginet når det kommer til syne. Vi ser på komponentene i de tre hovedanimasjonene vi bruker på hvert år i tidslinjen.
Hver infografikk forteller en historie. Jeg valgte historien om hvordan Web Design Day, konferansen jeg driver, har vokst de siste fire årene for infografikken min. Dette er dataene vi skal bruke i eksempelprosjektet vårt.
Kodebiter i opplæringen viser den ikke forhåndsinnstilte W3C-syntaksen for alle CSS3-egenskaper for lettere lesing. Den endelige CSS i eksempelfilene har alle nødvendige prefikser takket være autoprefixer. Vær også oppmerksom på at demofiler må kjøres på en webserver (lokal via noe som MAMP, eller FTPed opp til webverten) for å kjøre riktig.
Før du koder noen av animasjonene, bør du vurdere hva som er de mest interessante dataene og den generelle følelsen du vil oppnå. For webdesigndagen var det totale antallet deltakere, pluss den lengste distansen en deltaker reiste for å delta, interessante poeng å sammenligne. Stolpediagrammer som viser ting som antall pølser som forbrukes, er morsomme. Historien er lett i motivet, så fargene i designet er lyse og lekne, og opprettholder en jevn stil hele tiden.
Når vi blar til hvert år, vises datoen for å markere et punkt på tidslinjen. For å få disse i bevegelse, begynner vi med å skrive et sett med nøkkelbilder som beskriver animasjonen vi ønsker å se. Etter litt prøving og feiling og spilt rundt på CodePen, kom jeg til dette:
@keyframes popIn {0% {transform: skala (0);} 70% {transform: skala (1.05);} 100% {transform: skala (1);}}
Våre stikke innom animasjon starter med en forvandle skalering av elementet vårt til en størrelse på 0, som i hovedsak gjør det usynlig å starte inngangen fra. Så tildeler vi en skala på 70% av animasjonen 1.05, som vil vise elementet vårt litt større enn det som er tildelt 110px diameter. Til slutt legger den seg til sin sanne tildelte størrelse, en skala på 1, på den siste nøkkelbildet i animasjonen vår (100%). Denne nøkkelrammedeklarasjonen vil ikke animere noe alene. Animasjonen må tilordnes et element som skal tre i kraft, ved hjelp av .dato-anim-in klasse:
.date-anim-in {animasjon: popIn .4s cubic-bezier (0.6, -0.28, 0.735, 0.045) begge; }
Ethvert element vi tildeler .dato-anim-in klasse til vil ta på seg stikke innom animasjon, ta 0,4 sekunder å fullføre animasjonen, bruk animasjon-timing-funksjon eiendom definert i vår kubikk-bezier funksjon og har en animasjon-fyll-modus av både.
Merk at i HTML-en vår tildelte vi bare klassen av .Dato til årsmarkøren vår, ikke .dato-anim-in klasse som vi nettopp har opprettet. Vi tildeler .dato-anim-in dynamisk ved hjelp av jQuery for å kontrollere nøyaktig når stikke innom animasjon kjøres. Uten å skrive noen ekstra CSS, vil vi også kunne bruke den til å animere de andre datomarkørene, eller til og med andre elementer helt hvis vi ønsket det. Dato-animasjonen vår er klar og klar til bruk!
Søylediagramanimasjonen
Vårt søylediagram illustrerer antall veggiehunder, pølser og pierogier som konsumeres til lunsj hvert år. De bredde av hver stolpe animeres til den totale lengden mens den illustrerte etiketten for hver stolpe falmer inn når stolpene utvides. Den ekspanderende bevegelsen oppnås med en CSS-overgang og litt smart hekking. En CSS-animasjon brukes til fading. Det er litt av alt som skjer i denne animasjonen!
Først er HTML-en for hver stolpe i stolpediagrammet vårt strukturert slik:
div> div> / div> div> span> 24 / span> br /> img src = "img / vegdog.svg" alt = "veggie dogs" /> / div> / div>
Hver matvare inneholder en div> som vil representere søylen i søylediagrammet så vel som en div> med merkelappen. Det er en ekstra span> rundt det totale antallet for hvert element, slik at vi enkelt kan trekke det ut med jQuery for å tildele bredden til hver stolpe senere. Dette bidrar til å holde animasjonen vi lager gjenbrukbare over hvert års stolpediagram. CSS bak bevegelsen til hvert diagram er nøyaktig den samme, selv om dataene ikke er det. De div>s med klassen av .veg, .pierogi og . kjøttfull vil bestemme bredden for hver del av diagrammet. Hvert barn .bar div> er tildelt bredden på 100% i CSS:
.bar {bredde: 100%; høyde: 2rem;}
Nå kan vi endre tidspunktet for hvordan hvert felt i diagrammet vårt vokser ved å tildele en overgang til det overordnede elementet (.veg, .pierogi, og . kjøttfull). For maksimal effekt utvides stolpene i rekkefølge og ser ut til å vokse oppå hverandre: først .veg, deretter .pierogi, deretter . kjøttfull. Dette oppnås ved å tildele en overgangseiendom til hver og forskyve den tilhørende forsinkelsen:
.veg {z-indeks: 100; bredde: 0; overgang: bredde .5s letthet;} .pierogi {z-indeks: 50; bredde: 0; overgang: bredde .75s lette .2s;} .meaty {bredde: 0; overgang: bredde 1s letthet .2s;}
Alle tre seksjonene i stolpediagrammet har en innledende bredde på 0 til å begynne med og en z-indeks satt for å bevare den visuelle rekkefølgen for lagdeling. For eksempel, .veg vil skjule overgangen som skjer den .pierogi til den overgår til en bredere bredde enn .veg div> lagdelt over den. Hver seksjon har også en overgang for bredden med en litt annen varighet (det første tallet i stenografien) og forsinkelsen (det andre tallet i stenografien) for å skape den forskjøvne utvidende effekten. Når den totale bredden er tildelt hver av disse div>s via jQuery, overgangene utløses og barnet .bar elementet vil vokse sammen med hver.
Vår nestede etiketttekst og bilde får bevegelse på en lignende måte. Våre div> med klassen av etikett (som inneholder både teksten og bildet) er helt plassert til høyre for det overordnede elementet. Når foreldreelementet utvides via overgangen, beveger etiketten seg også med det. Det er en hardtarbeidende overgang!
Det er bare en ting til som jeg vil legge til i den ekspanderende stolpediagramanimasjonen. Det var veldig distraherende å se bildene og teksten på etikettene klosset stablet oppå hverandre nær begynnelsen av animasjonen da alle tre stolpene hadde nesten samme bredde. Etikettene overlappet og så forvrengt til stolpene utvidet seg litt. For å minimere den visuelle overlappingen la jeg til en animasjon som bleknet i hver etikett mens stolpene utvidet seg.
FadeUp-animasjonens nøkkelbilder starter med en opasitet på 0 og slutter med en opacitet på 1. Vi har også fire forskjellige klasser klare til å tildele denne animasjonen i forskjellige konfigurasjoner. (Vi bruker disse klassene på en lignende måte som .dato-anim-in klasse diskutert tidligere.)
@keyframes fadeUp {fra {opacity: 0;} til {opacity: 1;}}. fade-down {animasjon: fadeUp .15s letthet bakover begge; } .food1 .label {animasjon: fadeUp 0,5s lette 0,75s begge; } .food2 .label {animasjon: fadeUp 0,5s lette 1s begge deler; } .food3 .label {animasjon: fadeUp 0,5s eas-out 1,25s begge; }
De . nedfelling klassen kan se litt morsom ut i begynnelsen. Vi tildeler animasjonen av fadeUp men også innstilling av animasjon-retning eiendom å reversere via stenografien. Dette kjører nøkkelbildene i motsatt rekkefølge de er oppført (opasitet av 1 til en opasitet på 0). Så vi kan bruke dette ene settet med nøkkelbilder for å falme inn eller ut elementer, avhengig av animasjon-retning vi setter. Det er ikke alt! Vi oppretter ytterligere tre klasser som skal brukes til å falme inn stolpediagrammer. Vi bruker det samme fadeUp keyframes på hver, men med en annen animasjonsforsinkelse verdi for hver.
Når vi tildeler .mat1, .mat2 og .mat3 klasser via jQuery, vil etikettene i hver bli tildelt vår fadeUp animasjon med forskjøvet mengder forsinkelse. Vi får se dem falme inn en etter en. Ved å lage forskjellige konfigurasjoner av animasjonsegenskapene, kan du få mye kjørelengde fra en enkelt nøkkelrammedeklarasjon. Denne gjenbrukbarheten er en av mine favoritt CSS-animasjonsfunksjoner.
Mengden kaffe som ble drukket på konferansen ba om å bli vist dramatisk i denne infografikken. Hvert kaffekoppbilde representerer to kopper kaffe som forbrukes for å forhindre at ting blir for overveldende visuelt. Kaffekoppene svinger på plass med litt vår for dem og vises med forskjøvet timing. Vi oppnår dette med animerte 3D-transformasjoner og en håndfull n-type regler.
For å få kaffekoppene til å rotere i 3D-rom, roterer vi dem rundt y-aksen. HTML-elementer mangler dybde, så koppene er i det vesentlige postkort i rommet: de har front og bakside, men hvis vi ser på dem fra siden, er de i det vesentlige usynlige fordi de er uendelig tynne. Keyframes for animasjonen vår ser slik ut:
@keyframes swingIn {0% {transform: rotateY (90deg); animasjon-timing-funksjon: cubic-bezier (0,895, 0,03, 0,685, 0,22);} 5% {opacity: .5; animasjon-timing-funksjon: lineær;} 60% {transform: rotateY (-20deg); animasjon-timing-funksjon: cubic-bezier (0.165, 0.84, 0.44, 1);} 100% {opacity: 1; transform: rotateY (0deg);}}
Vi setter også perspektiv eiendom på vårt foreldreelement for å være sikker på at alle kaffekoppene våre roterer i samme perspektiv:
ul.cups {perspektiv: 800; ...}
I løpet av denne animasjonen påvirkes både opasiteten og rotasjonen av kaffekoppene i forskjellige hastigheter. Det begynner med en 90-graders rotasjon rundt y-aksen, noe som betyr at vårt papirtynne bilde roteres og ikke kan sees. Den ender med en rotasjon på 0 grader, noe som betyr at den er flat til skjermen. Den roterer forbi sin endelige posisjon for å skape den lille spretten tilbake på plass.
De animasjon-timing-funksjon er også satt annerledes mellom nøkkelbilder for å maksimere bevegelsens 'snappiness'. Du kan ikke animere animasjon-timing-funksjon eiendom, men du kan sette den til forskjellige verdier mellom nøkkelbilder som vi har her. De animasjon-timing-funksjon definert i vår 0% keyframe vil bli brukt mellom 0% og 5% keyframes og så videre gjennom keyframes som hver nye animasjon-timing-funksjon eiendom erklæres innenfor en nøkkelrammereegel.
I likhet med fadeUp animasjon for stolpediagrammer, blir animasjonen for kaffekoppene tilordnet li>s i hver liste, ved hjelp av et antall klasser. I dette tilfellet, siden det totale antallet kaffekopper varierer så sterkt, : nth-of-type pseudoklassevalg brukes til å tilordne forskjellige animasjonsforsinkelse eiendomsverdier til kaffekoppen li>s i grupper på 10. Når kaffekopplisten kommer til syne, hver li> vil bli tildelt klassen av .sving inn via jQuery. De : nth-of-type regler i CSS vil bestemme animasjonsegenskapene som er tildelt hver enkelt kaffekopp li>:
.swing-in: nth-of-type (2n + 1) {animasjon: swingIn 0.9s 0.75s; }
Disse klassene bruker .sving inn klasse for å sette en ordre for at elementene skal ta på seg sving inn animasjon. Elementene har også varierende verdier for animasjonsforsinkelse eiendom (det andre nummeret i stenografien). Disse overstyrer hverandre og får kaffekoppene til å animeres i grupper på 10, og gir animasjonen et nesten stripete utseende, ettersom koppene alle ser ut fra å tildele en klasse. Jeg brukte en Sass-løkke for å lage disse reglene med trinnvise mengder animasjonsforsinkelse. La oss ta en titt på JavaScript som tar vare på logikken og spiller dirigent til alle våre CSS-animasjoner og overganger i infografikken vår.
Utløser animasjonene
Hver av animasjonene våre må utløses når de kommer til syne basert på hvor langt ned på siden vi har rullet. Det er en rekke biblioteker og skript som kan gi oss den slags informasjon. Jeg har valgt å bruke plugin-modulen for jQuery. Denne plugin-modulen kan utløse en hendelse når et bestemt element er innenfor det synlige visningsområdet. Ved å bruke den hendelsen tildeler jeg CSS-klassene som inneholder animasjonsegenskapene mine når elementet i spørsmålet er synlig, og fjerner det når det ikke er det. CSS-animasjoner kjøres når de tildeles. Så når du legger til og fjerner en klasse med animasjonsegenskaper på denne måten, utløses egentlig en animasjon hver gang den legges til. Det er akkurat det jeg vil gjøre her. Husk vår .dato-anim-in klasse som hadde animasjonsegenskapene vi ønsket at datomarkørene våre skulle bruke? Vi kan tilordne den til hvert års markør når den kommer til syne, slik:
$ (". date"). bind ('inview', function (event, visible, visiblePartX, visiblePartY) {if (visible) {$ (this) .addClass ('date-anim-in');} else {$ (dette) .removeClass ('date-anim-in');}});
Ved hjelp av inview-plugin-modulen ser vi etter en div> med klassen av .Dato og legg til .dato-anim-in klasse når den er merket som synlig. Når de er lagt til, brukes de tilknyttede animasjonsegenskapene, og datomarkøren vår animeres med stikke innom animasjon. Når den ikke er synlig, .dato-anim-in klasse fjernes. De .date div> er tilbake til sine iboende stiler, og vi er klare til å tilordne .dato-anim-in klasse når den kommer tilbake. Årsmarkørene våre springer nå inn når vi ruller nedover tidslinjen. Mens kaffekoppene kontrolleres på samme måte, har stolpediagramanimasjoner mer på gang:
$ (". ni. mat"). bind ('inview', funksjon (hendelse, synlig, synligPartX, synligPartY) {hvis (synlig) {$ (". ni .veg"). removeClass ('falm ned') .addClass ('food1'). css ('width', $ (". ni .veg. label span"). text () * 2); $ (". ni .pierogi"). removeClass ('fade- ned '). addClass (' food2 '). css (' bredde ', $ (". ni .pierogi. etikett span"). tekst () * 2); $ (". ni .meaty"). removeClass ( 'fade-down'). addClass ('food3'). css ('width', $ (". ni .meaty .label span"). text () * 2);} else {$ (". ni. veg "). toggleClass ('fade-down food1'). css ('width', '0px'); $ (". ni .pierogi "). toggleClass ('fade-down food2'). css ('width' , '0px'); $ (". Ni .meaty"). ToggleClass ('fade-down food3'). Css ('width', '0px');}});
I dette tilfellet, som vårt .mat delen for hvert år blir synlig, gjør vi tre endringer i hver av de tre matvarene som er representert i stolpediagrammet vårt. Først fjerner vi klassen . nedfelling fra den (hvis den er der). For eksempel, hvis vi rullet opp igjen gjennom infografikken vår, . nedfelling klasse vil bli brukt på diagrammer vi allerede hadde rullet forbi. Neste den .mat1 (eller .mat2 eller.mat3) klasse er lagt til. Dette var klassen som var assosiert med vår forskjønne forsinkelse fadeUp animasjoner. Til slutt tildeler vi matvaren en bredde basert på totalt antall innpakket i span> for å utløse overgangen vi satte tidligere. På baksiden, når .food-delen ikke lenger er synlig, reverserer vi klasseoppgaven og setter bredde til 0 slik at den er klar til å spille igjen hvis den kommer tilbake. Og med det er infografikken vår fullt animert!
Ord: Val Head
Denne artikkelen dukket opprinnelig opp i nettmagasinutgave 246.
