Share
Truematter-teamet ble nylig oppdraget med å skape en morsom, sexy webapp som presenterer numeriske data på en engasjerende måte. Etter å ha satt hodene våre sammen, kom vi opp med et linjediagram som reagerer interaktivt på brukerinngang uten at himmelen forbyder å laste på noen sider. Vi er veldig glade for å kunne dele det med kodende fellesskap. Det er noen involverte CSS-triks, en dose jQuery og litt grafisk magi, men når vi er ferdige med denne opplæringen, har vi et vakkert interaktivt diagram som du kan tilpasse til ditt hjerteinnhold.
De grafiske elementene og måten disse elementene er hugget opp og kompilert er det som virkelig gir dette diagrammet noen wow-faktor. Det er bare tre grafiske elementer som trengs for dette prosjektet, men siden vi i hovedsak lager en illusjon ved hjelp av CSS og bilder, må disse grafikkene fremstilles med presisjon.
Selve diagrammet består av tre separate PNG'er stablet på toppen av hverandre ved hjelp av CSS, hvorav to er stasjonære (forsiden og baksiden "glassete" kartongkrokene), og den ene er animert ved hjelp av jQuery (den grønne staven i midten).
Bakgrunnsbiten består av bunnen av diagrammet (som vi bare ser når linjen er tom på 0%), bakre venstre og bakre høyre panel. På dette nederste laget, inkluderer vi alle ansiktene på grafhylsteret som må bli "dekket" når grafen er full eller delvis full. Dette er laget som virkelig gir 3D-illusjonen noe dybde.
Den animerte senterdelen av denne grafen er enkel å lage. Vi foreslår at du bruker svært grunnleggende 3D-ekstruderingsfunksjoner i Illustrator, eller du kan også bare tegne en trepanelform i Photoshop og kalle den en dag. Farg grafen din veldig sterkt, oversaturer den så mye som mulig. Hvorfor? Fordi i det endelige diagrammet vil det bli vist under et halvt gjennomsiktig foringsrør, slik at fargen vil bli dempet av laget som dekker det.
Det er super viktig at topp- og bunnkanten av dette stykket forblir gjennomsiktige, så vær sikker på å lagre den som en PNG.
Også like viktig: Gjør dette stykket nøyaktig samme høyde som grafhylsterbitene. I bildene våre ser midterlaget kortere ut enn foringsrøret - når du lager ditt sentrale stykke, gjør midtlinjen like høy som foringsrøret. Hvis du gjør det for kort, vil grafen din aldri kunne fylle opptil 100% på riktig måte. Hvis du gjør det for høyt, kan grafen skyte ut av foringsbeholderen når den er animert.
Her er hvor vi kommer til den virkelige visuelle trickery, som skjer langs bunnen av dette tredje og siste stykket. Mens de øverste venstre og høyre kantene beholder gjennomsiktighet, bør de nederste venstre og høyre kantene fylles i solid med samme farge som bakgrunnen som grafen skal sitte på.
For eksempel, hvis nettstedets bakgrunn er svart, må de to bunnen av dette stykket fylles i med solid svart. I vårt eksempel ovenfor er nettstedets bakgrunn hvit, så vi har fylt ut nederkanten med hvitt. Dette fargestoffområdet skjuler effektivt overspill fra midtlinjediagramstykket (grafisk element 2). Uten dette stykket og den ugjennomsiktige bunnkanten, mister vi 3D-effekten helt. Her er grafen uten den:
Greit! Vi har alle våre grafiske stykker fullført, og vi er klare til å hoppe rett inn i koden. HTML-koden er ganske enkel. Du ser på noen grunnleggende formvalgfelter og noen få divider for linjediagrammet.
Først, la oss se på hele koden, så tar vi det stykke for hverandre (ingen ordspill ment!). Vær oppmerksom på at strekgraf div-elementene er inkludert i skjemaetiketten.
Siden dette diagrammet er avhengig av javascript, kontrollerer vi først for å sikre at det er aktivert i nettleseren:
Nå begynner vi skjemaet. I denne demoen har vi brukt to enkle dropdowns, men du kan like lett endre denne koden for å bruke tekstfelt, radioknapper eller en hvilken som helst annen type inngang. Velg OnChange Attributtet er gitt funksjonen "calculate ();", som vi vil dekke i jQuery-delen nedenfor.
Hvor mye penger vil du bidra til besparelser hver måned? Hva er din månedlige inntekt?
Og til slutt, inkludert i skjemaetiketten, de grafiske elementene:
Prosentandel av månedslønn spart
25%50%75%100%
#formcontainer float: left; #grapharea posisjon: relative; flyte: venstre; margin-venstre: 4em; #graphcontainer posisjon: relative; bredde: 262px; høyde: 430px; overløp: skjult; #graphbackground, #graphforeground posisjon: absolutt; #graphbar posisjon: absolutt; topp: 430px; .graphlabel posisjon: absolutt; venstre: 270px; # p25 toppen: 365px; # p50 topp: 278px; # p75 topp: 191px; # p100 topp: 105px;
Sannsynligvis den mest avgjørende tingen som burde få øyet her er #graphbar div. Legg merke til at vår #graphbar div starter ut på 430px - den totale høyden på linjediagrammet. Denne høydedeklarasjonen er nummeret som er manipulert via jQuery for å gjøre grafen animert. Hvis du har opprettet dine egne grafiske elementer som er høyere eller kortere enn 430px, må du justere dette nummeret for å matche din egen grafikk.
På samme måte må du også justere px på # p25, # p50, # p75 og # p100. Disse topp erklæringer angir plasseringen av markørene på 25%, 50%, 75% og 100% på høyre side av grafen.
Ta også en titt på #graphcontainer-stilene:
#graphcontainer posisjon: relative; bredde: 262px; høyde: 430px; overløp: skjult;
Setter a stilling: i forhold;erklæringen på dette ytre omslaget gjør at vi kan bruke absolutt posisjonering på de tre divene innen #graphcontainer, slik at vi kan stable dem oppå hverandre ved hjelp av CSS-offset. Innstilling av høyde og bredde er også viktig her - høyden og bredden på denne diven skal perfekt passe til høyden og bredden på grafiske elementer 1 og 3. Og overløp: skjult; skjuler den animerte grafikken, element 2, når den strekker seg utenfor grensene til wrapping div.
Ah, nå for jQuery! Det knytter alle biter sammen og legger til i animasjonen. En rask gjennomgang av hele jQuery:
Først opprett en konstant å bruke i beregningene. ZEROPOS er pikselverdien av hvor det sentrale grafiske elementet (grafisk 2, det bevegelige stykket) skal posisjoneres til å representere 0%.
var ZEROPOS = 355;
Deretter finner du verdiene som er valgt av brukeren ved hjelp av velg boksene - lønn og besparelser. Beregn deretter prosentverdien - prosent.
Accentsconagua
var lønn = $ ("# inntekt") .val (); var besparelser = $ ("# besparelser") .val (); var prosent = spare / lønn; Det neste trinnet er en valideringskontroll for å sikre at brukeren faktisk har valgt verdier fra begge boksene. Hvis de har, fortsetter vi med skriptet. Ellers gjør vi ingenting.
hvis (parseInt (besparelser)> 0 && parseInt (lønn)> 0)
Hvis brukeren har angitt de riktige verdiene, sørger vi da for at de har valgt en lønn som er høyere enn beløpet de ønsker å bidra til besparelser. Hvis de har, fortsetter vi med skriptet. Ellers ber vi brukeren om å endre sine valg.
hvis (parseInt (besparelser)> parseInt (lønn)) varsling ("Du kan ikke lagre mer enn du tjener - vennligst endre valgene dine tilsvarende."); Nå er vi endelig til kjøttet i skriptet - beregner posisjonen som vi vil flytte graflinjen og så skyte av jQuery animere funksjonaliteten for å få det til å skje.
val = (prosent == 0)? ZEROPOS: ZEROPOS - (prosent * ZEROPOS); $ ("# graphbar"). animate (top: val + "px", 1500); Så, ved beregning av verdien for graflinjen posisjon - val - først bestemme om prosentandelen er null. Hvis ja, sett verdien som er lik ZEROPOS-konstanten. Ellers beregner du den nye stangposisjonen ved å subtrahere prosentverdien multiplisert med nullposisjonsverdien fra nullposisjonsverdien. Denne formelen brukes fordi vi animerer linjen fra nullposisjonen nederst i diagrammet opp mot toppen.
Når pikselverdien er beregnet, vet vi hvor vi er på vei, så bare ring animasjonsmetoden i jQuery på graphbar-objektet som passerer i den nye CSS-verdien for toppposisjonen med en animasjonshastighet på 1500 (animasjonshastigheten i millisekunder). Deretter gjør jQuery det magiske for oss og flytter linjen i diagrammet tilsvarende. VIOLA!
Håper du likte denne opplæringen!
