Share
Il team di Truematter è stato recentemente incaricato di creare una divertente e sexy app web che presenta i dati numerici in modo coinvolgente. Dopo aver messo insieme le nostre idee, abbiamo creato un grafico a barre che risponde in modo interattivo all'input dell'utente senza, ci mancherebbe, ricaricando le pagine. Siamo molto lieti di poterlo condividere con la community di coding. Ci sono alcuni trucchi CSS, una dose di jQuery e qualche magia grafica, ma quando avremo finito con questo tutorial, avremo un grafico magnificamente interattivo che puoi personalizzare secondo il tuo cuore.
Gli elementi grafici e il modo in cui questi elementi sono triturati e compilati è ciò che dà davvero a questa carta un fattore wow. Ci sono solo tre elementi grafici necessari per questo progetto, ma, dato che stiamo essenzialmente creando un'illusione usando CSS e immagini, questi elementi grafici devono essere realizzati con precisione.
Il grafico stesso è composto da tre PNG separati impilati uno sopra l'altro utilizzando i CSS, due dei quali sono stazionari (i pezzi di vetrino "vetroso" anteriore e posteriore), e uno dei quali è animato usando jQuery (il pezzo di barra verde in la metà).
Il pezzo di sfondo è composto dal fondo del grafico (che vediamo solo quando la barra è vuota allo 0%), i pannelli posteriore sinistro e posteriore destro. Su questo livello più basso, includiamo tutte le facce dell'involucro del grafico che devono diventare "coperte" quando il grafico è pieno o parzialmente pieno. Questo è lo strato che conferisce profondità all'illusione 3D.
La parte centrale animata di questo grafico è semplice da creare. Ti consigliamo di utilizzare le funzioni di estrusione 3D di base in Illustrator, oppure puoi anche disegnare una forma a tre pannelli in Photoshop e chiamarla un giorno. Colora il tuo grafico molto brillantemente, saturandolo il più possibile. Perché? Perché nel grafico finale, verrà mostrato sotto un involucro semitrasparente, quindi il colore verrà disattivato dal livello che lo copre.
È molto importante che i bordi superiore e inferiore di questo pezzo rimangano trasparenti, quindi assicurati di salvarlo come PNG.
Altrettanto importante: fai questo pezzo esattamente alla stessa altezza dei pezzi del case del grafico. Nelle nostre immagini qui, lo strato intermedio sembra più corto dell'involucro: quando crei il pezzo centrale, fai in modo che la barra centrale sia alta esattamente come l'involucro. Se lo fai troppo corto, il tuo grafico non sarà mai in grado di riempire fino al 100% correttamente. Se lo fai troppo alto, il grafico può uscire dal contenitore quando è animato.
Ecco dove arriviamo al vero trucco visivo, che avviene lungo il bordo inferiore di questo terzo e ultimo pezzo. Mentre i bordi superiore sinistro e destro mantengono la trasparenza, i bordi inferiore sinistro e destro dovrebbero essere riempiti di solido con lo stesso colore dello sfondo su cui sarà seduto il grafico.
Ad esempio, se lo sfondo del tuo sito web è nero, i due bordi inferiori di questo pezzo devono essere riempiti con nero pieno. Nel nostro esempio sopra, lo sfondo del sito è bianco, quindi abbiamo riempito i bordi inferiori con il bianco. Questa area in tinta unita nasconde efficacemente qualsiasi sovraspruzzatura dal pezzo del grafico a barre centrale (elemento grafico 2). Senza questo pezzo e il suo bordo inferiore opaco, perdiamo completamente l'effetto 3D. Ecco il grafico senza di esso:
Va bene! Abbiamo tutti i nostri pezzi grafici completi e siamo pronti per entrare nel codice. Lo stesso HTML è piuttosto semplice. Stai osservando alcuni campi di selezione dei moduli di base e alcune div per il grafico a barre.
Per prima cosa, diamo un'occhiata al codice completo, quindi lo prenderemo pezzo per pezzo (nessun gioco di parole!). Si noti che gli elementi div del grafico a barre sono inclusi nel tag form.
Poiché questo grafico dipende da javascript, per prima cosa assicuriamoci che sia abilitato nel browser:
Ora iniziamo il modulo. Ai fini di questa demo, abbiamo utilizzato due semplici elenchi a discesa, ma è possibile modificare il codice in modo semplice per utilizzare campi di testo, pulsanti di opzione o qualsiasi altro tipo di input. La selezione onchange l'attributo ha la funzione "calculate ();", che tratteremo nella sezione jQuery di seguito.
Quanti soldi vuoi contribuire al risparmio ogni mese? Qual è il tuo reddito mensile?
E infine, incluso nel tag form, gli elementi grafici:
Percentuale di salario mensile risparmiato
25%50%75%100%
#formcontainer float: left; #grapharea position: relativo; fluttuare: a sinistra; margin-left: 4em; #graphcontainer position: relative; larghezza: 262 px; altezza: 430 px; overflow: nascosto; #graphbackground, #graphforeground position: absolute; #graphbar position: absolute; top: 430px; .graphlabel position: absolute; a sinistra: 270 px; # p25 top: 365px; # p50 top: 278px; # p75 top: 191px; # p100 top: 105px;
Probabilmente la cosa più cruciale che dovrebbe catturare la tua attenzione qui è il div di #graphbar. Nota che il nostro div #graphbar inizia a 430px - l'altezza totale del grafico a barre. Questa dichiarazione di altezza è il numero che viene manipolato tramite jQuery per animare il grafico. Se hai creato i tuoi elementi grafici più alti o più corti di 430 px, devi adeguare quel numero per adattarlo alla tua grafica.
Allo stesso modo, dovrai anche regolare il px di # p25, # p50, # p75 e # p100. Questi superiore le dichiarazioni impostano la posizione dei marcatori del 25%, 50%, 75% e 100% sul lato destro del grafico.
Inoltre, dai un'occhiata agli stili #graphcontainer:
#graphcontainer position: relative; larghezza: 262 px; altezza: 430 px; overflow: nascosto;
Mettendo a position: relative;la dichiarazione su questo wrapper esterno ci consente di utilizzare il posizionamento assoluto sui tre div all'interno di #graphcontainer, in modo che possiamo impilarli uno sopra l'altro usando gli offset CSS. Anche l'impostazione di altezza e larghezza sono fondamentali: l'altezza e la larghezza di questo div devono corrispondere perfettamente all'altezza e alla larghezza degli elementi grafici 1 e 3. E overflow: nascosto; nasconde il grafico animato, elemento 2, quando si estende oltre i limiti del div wrapping.
Ah, ora per il jQuery! Lega tutti i pezzi insieme e aggiunge l'animazione. Una rapida rassegna del jQuery completo:
Innanzitutto, crea una costante da utilizzare nei calcoli. ZEROPOS è il valore in pixel di dove l'elemento grafico centrale (grafico 2, il pezzo mobile) deve essere posizionato per rappresentare lo 0%.
var ZEROPOS = 355;
Successivamente, trova i valori selezionati dall'utente utilizzando le caselle di selezione - salario e risparmi. Quindi calcolare il valore percentuale - percentuale.
Accentsconagua
var stipendio = $ ("# reddito"). val (); var savings = $ ("# savings"). val (); var percento = risparmi / stipendio; Il passaggio successivo è un controllo di convalida per assicurarsi che l'utente abbia effettivamente selezionato i valori da entrambe le caselle di selezione. Se lo sono, continuiamo con la sceneggiatura. Altrimenti, non facciamo nulla.
if (parseInt (risparmio)> 0 && parseInt (salario)> 0)
Se l'utente ha inserito i valori appropriati, ci assicuriamo che abbiano selezionato uno stipendio superiore all'importo che desidera contribuire al risparmio. Se lo sono, continuiamo con la sceneggiatura. Altrimenti chiediamo all'utente di cambiare le loro selezioni.
se (parseInt (risparmio)> parseInt (salario)) avviso ("Non è possibile salvare più di quanto si guadagna - si prega di modificare le selezioni di conseguenza."); Ora siamo finalmente al centro della sceneggiatura - calcolando la posizione in cui sposteremo la barra del grafico e poi sparando dalla funzionalità jQuery animate per farlo accadere.
val = (percentuale == 0)? ZEROPOS: ZEROPOS - (percentuale * ZEROPOS); $ ("# graphbar"). animate (top: val + "px", 1500); Quindi, nel calcolare il valore per la posizione della barra del grafico - val - prima determinare se la percentuale è zero. In tal caso, impostare il valore uguale alla costante ZEROPOS. Altrimenti, calcolare la nuova posizione della barra sottraendo il valore percentuale moltiplicato per il valore di posizione zero dal valore di posizione zero. Questa formula è usata perché stiamo animando la barra dalla posizione zero nella parte inferiore del grafico verso l'alto.
Una volta calcolato il valore del pixel, sappiamo dove stiamo andando, quindi chiama semplicemente il metodo animato in jQuery sull'oggetto graphbar passando il nuovo valore CSS per la prima posizione con una velocità di animazione di 1500 (la velocità dell'animazione in millisecondi). Quindi jQuery fa la magia per noi e sposta la barra all'interno del grafico di conseguenza. Viola!
Spero ti sia piaciuto questo tutorial!
