Questa tecnica di progettazione si trova comunemente nei portfolio personali o nei siti Web degli studi di progettazione. Le barre delle abilità rappresentano un livello di conoscenza relativo a determinati compiti: web design, illustrazione, branding, character design, il tuo nome! L'aggiunta di alcune animazioni fantasiose a queste barre delle abilità fornirà una connessione più veloce allo spettatore.
In questo tutorial voglio dimostrare come è possibile costruire barre di abilità CSS3 usando l'animazione dei fotogrammi chiave. Questo è anche completamente possibile eseguire utilizzando JavaScript, che sarebbe più forte nei vecchi browser Web legacy. Tuttavia i fotogrammi chiave CSS3 stanno crescendo in popolarità con un supporto molto più ampio in questi giorni. Dai un'occhiata alla mia demo dal vivo per vedere il prodotto finale.
Demo dal vivo - Scarica il codice sorgente
Iniziare
Navigando su Google mi sono imbattuto in questo post, delineando lo stile di animazione CSS3. In realtà è piuttosto semplice una volta comprese le proprietà e il modo in cui i fotogrammi chiave / animazione lavorano insieme. La mia pagina utilizza un semplice doctype HTML5 con un singolo foglio di stile CSS esterno.
Per prima cosa dovremmo dare un'occhiata al markup HTML e come questo costruisce una barra dinamica attiva. La pagina include due sezioni diverse: una con etichette interne e una senza etichette. Poiché tutte le barre delle abilità usano un codice quasi identico, ho copiato solo la prima barra della pagina.
Il div #insieme di abilità è usato per incapsulare l'intera collezione di abilità. Questo si comporta come un wrapper in modo da poter centrare tutto, aumentare / diminuire la larghezza o regolare altre impostazioni in CSS. Il div interno con una classe .abilità avvolge ogni singola abilità misurata. In questo caso, stiamo esaminando la codifica HTML5 / CSS3 che è classificata al 100% di conoscenza.
L'intestazione H3 interna è posizionata in modo che lo spettatore possa sapere che cosa sta misurando l'abilità. Questo potrebbe essere inserito all'interno della barra delle abilità, ma ho scelto di mettere gli anni di esperienza all'interno della barra. Noterai che la barra animata stessa è contenuta in un guscio esterno.
L'elemento span .bar utilizza uno sfondo grigio statico con alcuni effetti ombra per evidenziare la pagina. È stato progettato in modo simile all'esempio del CSS Deck, ma ho cercato di semplificare un po 'l'HTML. La durata interiore .skillbar è dove avviene l'animazione.
Animare abilità individuali
Noterai ciascuno .skillbar ha anche una classe secondaria correlata all'abilità che viene misurata. Questi sono allegati alle animazioni CSS3 che girano su fotogrammi chiave. Ogni abilità viene misurata separatamente e ciascuna si ferma in un punto diverso (HTML / CSS capita semplicemente di raggiungere il 100%).
Dato che sto usando le classi per queste barre di abilità, possiamo effettivamente duplicarle più volte nella pagina. Ecco come ho creato un altro set di esempi sulla stessa pagina riutilizzando le stesse classi animate. Poiché queste barre contengono anche piccoli bit di testo, non possono iniziare a larghezza 0 px. Normalmente questo va bene, ma in questo caso il testo si interromperà sulla riga successiva e solo una volta che la barra si animerà il testo si riposizionerà.
Quindi avere classi individuali significa che posso impostare la larghezza originale in modo che corrisponda alla lunghezza del testo interno. In questo modo non si rompe o non appare mai buggato e il testo rimane sempre centrato nella barra delle abilità, indipendentemente dalla larghezza dell'animazione.
Posizionamento degli elementi
Le mie proprietà CSS di base non sono troppo complicate, ma ci sono alcune idee che vale la pena discutere. Inizierò con la struttura generale del contenitore delle barre delle abilità.
L'esterno .bar contenitore usa un valore di larghezza / altezza fisso per garantire che tutto sia uguale in tutti i browser. L'interno .skillbar mantiene un valore di altezza con il testo, ma nel secondo esempio, quegli elementi di estensione non apparirebbero semplicemente perché sono vuoti. Dobbiamo usare il 100% di altezza su tutte le barre delle abilità interne per assicurarci che appaiano anche senza contenuto.
L'effetto del testo centrato è anche molto interessante perché il contenuto interno si animerà insieme alla barra stessa. Potrebbe non piacerti questo effetto ed è piuttosto semplice cambiare l'allineamento. Ma se consideri quanto sia facile tutto questo, potresti iniziare a confrontarti con nuovi concetti da provare.
Modalità di riempimento dell'animazione
Quando ho iniziato a animare gli elementi, ogni barra terminava l'animazione, quindi ricorre automaticamente al 100% della larghezza. Questa ovviamente non era la mia intenzione, quindi sono andato alla ricerca di una soluzione.
Stavo leggendo che possiamo impostare una larghezza predefinita come nella classe originale .htmlcss quindi finisce con una larghezza del 100% una volta che l'animazione è stata completata? o nel caso di jQuery la classe avrebbe bisogno di una larghezza del 55%. Sento che questo sconfigge quasi lo scopo di dover copiare il valore della larghezza due volte. Poi ho scoperto le modalità di riempimento, che non avevo mai sentito prima.
Le modalità di riempimento indicano all'animazione come utilizzare gli stili prima e dopo il completamento. Usando la parola chiave in avanti costringerà ogni elemento a conservare gli stili CSS trovati nell'ultimo keyframe. Quindi in questo caso stiamo eseguendo un'animazione diversa per ogni classe e ogni animazione ha una posizione iniziale dello 0% seguita da una posizione completata al 100%. Non ho mai saputo dopo il completamento dell'animazione che sarebbe tornato agli stili originali.
Se vuoi leggere un po 'di più sulle modalità di riempimento consulta questo articolo di Mozilla che approfondisce i dettagli. Il concetto è molto semplice, ma posso capire come un nuovo sviluppatore che prova le animazioni dei fotogrammi chiave CSS3 non ne sappia nulla.
Finalizzazione dei fotogrammi chiave
L'ultimo blocco di codice che voglio condividere sono i keyframe stessi. Diamo a ciascun setup di keyframe un nome univoco che è rappresentato dal precedente animazione proprietà. Sto usando i prefissi CSS3 per -moz e -webkit per gestire la conformità con il maggior numero possibile di versioni del browser. Noterai che le animazioni sono suddivise in blocchi raggruppati dal nome dell'animazione:
Noterai inoltre che ogni animazione utilizza solo una posizione iniziale e una posizione completata, che dovrebbero animare entro 1,5 secondi. Alcune delle posizioni iniziali usano 35px o 45px per incapsulare completamente il testo dell'etichetta. È possibile modificare questo valore su 0px se non si desidera che il testo venga trovato all'interno della barra delle abilità stessa.
Oltre a questi stili, tutto il resto dovrebbe essere abbastanza noto. L'ultima grande sezione del mio foglio di stile ridefinisce i gradienti interni per ogni barra delle abilità: senza etichette puoi provare a incorporare i colori per differenziare i set di abilità. Questo è il motivo per cui le mie barre di abilità del set secondario includono anche un .ALT classe.
Demo dal vivo - Scarica il codice sorgente
Chiusura
Ci sono molti altri fantastici tutorial che trattano questo argomento e altre animazioni di fotogrammi chiave. Se hai tempo di cercare, puoi trovare molti esempi di codice di grandi dimensioni su siti Web come CodePen e JSFiddle.Entrambi i miei esempi con etichette di testo interne, o solo le percentuali standard, possono funzionare in qualsiasi progetto di sito web simile.
Sii creativo con queste animazioni per vedere come potrebbero inserirsi in altri progetti web futuri. Puoi anche scaricare il mio codice sorgente del tutorial e provare a creare animazioni più complesse.