Pubblicato da Oggi giochiamo un po' con i css, ovvero i fogli di stile del linguaggio html.
Quello che ci accingiamo a fare è la creazione di una barra di avanzamento dinamica, ovvero una barra animata con i css, da utilizzare per grafici o in altre occasioni, da far partire in automatico al caricamento della pagina.
Mettiamo ad esempio di voler avere a video l'effetto di un loading che vada da 0 a 100, una progress bar insomma.
Ma possiamo creare anche il classico grafico a barre con i css, senza bisogno di gif animate, flash o altro, da far partire in automatico, senza bisogno del passaggio del mouse o di un click.
Vediamo subito come fare.
Come creare una barra di avanzamento animata che parte in automatico al caricamento della pagina
Ecco il codice che potete utizzare per ottenere una barra animata con i css, che va da 0 a 100 in 2 secondi, e soprattutto che parte in automatico al caricamento della pagina:
<html>
<head>
<title>Barra animata per grafici css</title>
<style type="text/css">
.barra
{
heigth: 20px;
width: 400px;
background: #009900;
animation-name: animazione;
animation-duration: 2s;
float:left;
}
@keyframes animazione
{
0% {background: #FF0000; width: 0px;}
50% {background: #FF9900;}
100% {background: #009900; width: 400px;}
}
</style>
</head>
<body>
<div style="float:left;">0%</div><div class="barra"> </div><div>100%</div>
</body>
</html>
Copiando ed incollando queste poche righe di codice html in un file di testo e rinominandolo in index.html, e poi aprendolo con il browser, vedrete una simpatica animazione, come da video sotto riportato.
Utilizzando solo i css infatti, sarà possibile creare grafici animati senza dover utilizzare nè javascript, nè flash, nè immagini.
Ma veniamo ad un po' di spiegazioni.
L'attributo css da utilizzare per questa cosa si chiama animation, che abbinato al potentissimo keyframes, consente di generare ogni sorta di animazione.
E' infatti possibile sia modificare in tempo reale un box div di altezza, che in larghezza, ma anche cambiarne il colore, decidendo volendo anche gli intervalli intermedi che vanno dall'inizio del processo alla fine.
Abbiamo dunque, animation-name, a cui si abbina un nome alla nostra animazione.
Po c'è animation-duration che in secondi indica quanto dura la nostra animazione... ed altri attributi che non sono oggetto di questo tutorial.
Poi si passa al keyframes, nel quale si possono definire gli intervalli, es. 0% per quello di partenza, dove si assegna ad esempio un colore di sfondo ed una larghezza iniziale. Un eventuale step intermedio come il 50%, al quale poter passare altri parametri, ed infine il 100% che rappresenta la fine dell'animazione.
Penso che l'esempio indicato si spieghi da sè.
Questo codice css per creare grafici animati, barre o altro, è compatibile con le ultime versioni di: internet explorer, microsoft edge, google chrome, firefox e opera.
Se si vuole aumentare la compatibilità per altri browser (che non ho testato), si può replicare il proprio codice usando la seguente sintassi:
-webkit-animation: nome-animazione 2s; /* Safari 4+ */
-moz-animation: nome-animazione 2s; /* Firefox 5+ */
-o-animation: nome-animazione 2s; /* Opera 12+ */
animation: nome-animazione 2s; /* IE 10+, Firefox 29+ */
@-webkit-keyframes nome-animazione {
// codice animazioni da compiere
}
@-moz-keyframes nome-animazione {
// codice animazioni da compiere
}
@-o-keyframes nome-animazione {
// codice animazioni da compiere
}
@keyframes nome-animazione {
// codice animazioni da compiere
}
Bene, direi che è tutto.
Questo tra l'altro non è l'unico metodo per creare animazioni con i css, ma diciamo che è quello che ho trovato per poter far partire l'animazione in automatico al caricamento della pagina (css animation autoplay), senza bisogno di azioni da mettere al passaggio del mouse (hover), o al click del mouse (onclick javascript).
Piaciuto l'articolo? Lascia un commento!
EmoticonEmoticon