Share
Echipa Truematter a fost recent însărcinată să creeze o aplicație web distractivă și sexy, care prezintă datele numerice într-un mod atrăgător. După ce ne-am pus capul împreună, am venit cu o diagramă de bare care răspunde interactiv la intrarea utilizatorului, fără ca cerul să se reîncarce. Suntem foarte bucuroși să putem împărtăși acest lucru comunității de codare. Există câteva trucuri CSS implicate, o doză de jQuery și o anumită magie grafică, dar când vom termina cu acest tutorial, vom avea o diagramă foarte interesantă pe care să o puteți personaliza în conținutul inimii dvs..
Elementele grafice și modul în care aceste elemente sunt tăiate și compilate reprezintă ceea ce oferă într-adevăr acestui grafic un factor de wow. Există doar trei elemente grafice necesare pentru acest proiect, dar, deoarece noi creăm în esență o iluzie folosind CSS și imagini, aceste grafică trebuie să fie artizanale cu precizie.
Diagrama în sine este alcătuită din trei PNG-uri separate, așezate unul peste celălalt folosind CSS, două dintre ele fiind staționare (piesele din carcasa din față și spate "sticlă"), iar una dintre ele este animată folosind jQuery mijlocul).
Piesa de fundal este formată din partea de jos a diagramei (pe care o vedem doar când bara este goală la 0%), panourile din stânga și din spate din dreapta. Pe acest strat cel mai de jos, includem toate fețele carcasei grafurilor care trebuie să fie "acoperite" când graficul este plin sau parțial plin. Acesta este stratul care dă iluzia 3D o adâncime.
Porțiunea animată a acestui grafic este ușor de creat. Vă sugerăm să utilizați funcții de extrudare 3D de bază în Illustrator sau puteți să desenați o formă de trei panouri în Photoshop și să o numiți o zi. Culoarea graficului foarte luminos, suprasaturând-o cât mai mult posibil. De ce? Deoarece în graficul final, acesta va fi arătat sub o carcasă semi-transparentă, astfel încât culoarea va fi oprită de stratul care o acoperă.
Este foarte important ca marginile de sus și de jos ale acestei piese să rămână transparente, deci asigurați-vă că le salvați ca PNG.
De asemenea la fel de important: faceți această piesă exact la aceeași înălțime cu piesele din carcasă. În imaginile noastre, stratul de mijloc pare mai scurt decât carcasa - când creați piesa centrală, faceți bara centrală exact la fel de înaltă ca și carcasa. Dacă o faceți prea scurt, graficul dvs. nu va putea niciodată să se umple până la 100% în mod corespunzător. Dacă îl faci prea înalt, graficul se poate trage din containerul carcasei când este animat.
Iată unde ajungem la trucul vizual real, care se întâmplă de-a lungul marginii de jos a acestei a treia și ultima piesă. În timp ce marginea superioară din stânga și din dreapta păstrează transparența, marginea inferioară din stânga și din dreapta trebuie umplută cu aceeași culoare ca fundalul pe care va fi așezat graficul.
De exemplu, dacă fundalul site-ului este negru, cele două margini inferioare ale acestei piese trebuie să fie completate cu negru solid. În exemplul de mai sus, fundalul site-ului este alb, așa că am completat marginile de jos cu alb. Această zonă cu culori solide ascunde în mod eficient orice depășire de la piesa de diagramă de mijloc (element grafic 2). Fără această piesă și marginea ei opacă inferioară, vom pierde în întregime efectul 3D. Iată graficul fără el:
Bine! Avem toate piesele noastre grafice complete și suntem gata să sari direct în cod. HTML-ul în sine este destul de simplu. Vă uitați la câteva câmpuri de selectare a formelor de bază și câteva divuri pentru graficul de bare.
Mai intai, sa ne uitam la codul complet, apoi sa-l luam bucata cu bucata (fara nici un ban!). Rețineți că elementele div div grafice sunt incluse în eticheta de formular.
Deoarece această diagramă depinde de javascript, verificăm mai întâi să vă asigurați că este activată în browser:
Acum începem formularul. În scopul acestei demo-uri, am folosit două dropdown-uri simple, dar puteți modifica la fel de ușor acest cod pentru a utiliza câmpuri de text, butoane radio sau orice alt tip de intrare. Selectați cu privire la schimbările atributul are funcția "calculate ();" pe care o vom acoperi în secțiunea jQuery de mai jos.
Câți bani doriți să contribuiți la economii în fiecare lună? Care este venitul dvs. lunar?
Și în final, inclus în eticheta formularului, elementele grafice:
Procentul salariului lunar salvat
25%50%75%100%
#formcontainer float: left; #grapharea position: relative; plutește la stânga; margin-stânga: 4em; #graphcontainer position: relative; lățime: 262px; înălțime: 430px; overflow: ascuns; #grafbackground, #graphforeground poziție: absolută; #grafbar poziție: absolută; top: 430px; .graphlabel poziție: absolută; stânga: 270px; # p25 top: 365px; # p50 top: 278px; # p75 top: 191px; # p100 top: 105px;
Probabil cel mai important lucru pe care ar trebui să-l prindeți aici este diagrama #graphbar. Observați că diviziunea #graphbar div începe la 430px - înălțimea totală a barei de bare. Această declarație de înălțime este numărul care este manipulat prin jQuery pentru a face animația grafică. Dacă ați creat propriile elemente grafice care sunt mai înalte sau mai scurte de 430 pixeli, va trebui să ajustați acel număr pentru a se potrivi graficei proprii.
De asemenea, va trebui să ajustați și pixelul # p25, # p50, # p75 și # p100. Aceste top declarațiile au stabilit poziția marcatorilor 25%, 50%, 75% și 100% în partea dreaptă a graficului.
De asemenea, examinați cu atenție stilurile #graphcontainer:
#graphcontainer position: relative; lățime: 262px; înălțime: 430px; overflow: ascuns;
Punerea a Poziția: relativă;declarația cu privire la această învelitoare exterioară ne permite să folosim poziționarea absolută pe cele trei divuri din cadrul #graphcontainer, astfel încât să le putem suprapune pe celelalte folosind compensări CSS. Stabilirea unei înălțimi și a unei lățimi este, de asemenea, vitală aici - înălțimea și lățimea acestui div ar trebui să se potrivească perfect cu înălțimea și lățimea elementelor grafice 1 și 3. Și overflow: ascuns; ascunde graficul animat, elementul 2, atunci când se extinde în afara limitelor divului de împachetare.
Ah, acum pentru jQuery! Se îmbină toate piesele și se adaugă în animație. O scurtă trecere în revistă a jQuery complet:
Mai întâi, creați o constantă de utilizat în calcule. ZEROPOS este valoarea pixelului unde elementul grafic central (graficul 2, piesa mobilă) trebuie să fie poziționat pentru a reprezenta 0%.
var ZEROPOS = 355;
Apoi, găsiți valorile selectate de utilizator utilizând casetele de selectare - salariu și economii. Apoi calculați valoarea procentuală - procente.
Accentsconagua
var salariu = $ ("# venit") val (); var savings = $ ("# economii") val (); var percent = economie / salariu; Următorul pas este verificarea validării pentru a vă asigura că utilizatorul a selectat de fapt valori din ambele casete selectate. Dacă au, vom continua cu scenariul. Altfel, nu facem nimic.
dacă (parseInt (economii)> 0 && parseInt (salariu)> 0)
Dacă utilizatorul a introdus valorile corespunzătoare, atunci ne asigurăm că au selectat un salariu mai mare decât suma pe care doresc să o contribuie la economii. Dacă au, vom continua cu scenariul. În caz contrar, îi solicităm utilizatorului să-și schimbe selecțiile.
dacă (parseInt (savings)> parseInt (salary)) alert ("Nu puteți salva mai mult decât câștigați - vă rugăm să modificați selecțiile în consecință."); Acum suntem în sfârșit la carnea scriptului - calculând poziția la care vom muta bara de graf și apoi aruncând jQuery animate pentru a face să se întâmple.
val = (procent == 0)? ZEROPOS: ZEROPOS - (procente * ZEROPOS); (top: val + "px", 1500);
Astfel, calculând valoarea pentru poziția barei de grafic - val - mai întâi determinați dacă procentajul este zero. Dacă da, setați valoarea egală cu constanta ZEROPOS. În caz contrar, calculați noua poziție a barei scăzând valoarea procentuală înmulțită cu valoarea poziției zero din valoarea poziției zero. Această formulă este utilizată deoarece animăm bara din poziția zero în partea de jos a graficului sus în sus.
Odată ce valoarea pixelilor este calculată, știm unde ne îndreptăm, deci pur și simplu apelați metoda animată în jQuery pe obiectul grafic care trece în noua valoare CSS pentru poziția de top cu o rată de animație de 1500 (viteza animației în milisecunde). Apoi jQuery face magia pentru noi și mișcă bara în diagramă în consecință. VIOLA!
Sper că v-ați bucurat de acest tutorial!
