Nel precedente articolo su quicksand.js su ti ho mostrato come animare il tuo portfolio lavori e oggi voglio parlarti di come animare le tue competenze “skills” grazie all’uso di “css3 animation” e dei “keyframes” che insieme ci consentono di creare delle animazioni. I keyframes offrono la possibilità di modificare il set di stili css molte volte durante l’animazione, bisogna specificare quando avverrà il cambiamento.
HTML
<ul id="skill"> <li><span class="bar html"></span><h2>Html</h2</li> <li><span class="bar css"></span><h2>Css</h2></li> <li><span class="bar javascript"></span><h2>Javascript</h2></li> <li><span class="bar wordpress"></span><h2>Wordpress</h2></li> </ul>
Il markup usato qui sopra è una semplice lista non ordinata, all’interno della quale ci sono degli <span> con classi diverse e degli <h2> per i titoli delle competenze. Fin qui tutto facile, no?
CSS
#skill {width: 400px;margin: 0 auto;position: relative;padding: 30px 0;line-height: 2em;font-size: 14px;}
#skill li {list-style: none; margin-bottom: 35px;height: 30px; background: #ccc; color: #666;}
#skill li h2 {position: relative; top: -30px; font-size: 16px;}
.bar {height:30px; position:absolute;}
.html {width:100%;background: #6dc86d;
-webkit-animation:html 3s ease-in-out;
-moz-animation:html 3s ease-in-out;
}
.css {width:70%;background: #6dc86d;
-webkit-animation:css 3s ease-in-out;
-moz-animation:css 3s ease-in-out;
}
.javascript {width:55%;background: #6dc86d;
-webkit-animation:javascript 3s ease-in-out;
-moz-animation:javascript 3s ease-in-out;
}
.wordpress {width:90%;background: #6dc86d;
-webkit-animation:wordpress 3s ease-in-out;
-moz-animation:wordpress 3s ease-in-out;
}
@-moz-keyframes html { 0% {width:0;} 100% {width:100%;}}
@-moz-keyframes css { 0% {width:0;} 100% {width:70%;} }
@-moz-keyframes javascript { 0% {width:0;} 100% {width:55%;} }
@-moz-keyframes wordpress { 0% {width:0;} 100% {width:90%;} }
@-webkit-keyframes html { 0% {width:0;} 100% {width:100%;}}
@-webkit-keyframes css { 0% {width:0;} 100% {width:70%;} }
@-webkit-keyframes javascript { 0% {width:0;} 100% {width:55%;} }
@-webkit-keyframes wordpress { 0% {width:0;} 100% {width:90%;} }
Come hai notato ci sono varie classi, che corrispondono alle competenze (html, css, javascript, wordpress) di cui per ognuna ho specificato la larghezza, il background e il tipo di animazione. Il grosso del lavoro lo farà il keyframes con i valori che ho impostato. Come ho detto in precedenza bisogna specificare quando avverrà il cambiamento. I valori del keyframes si possono impostare in percentuale oppure con le parole chiave “from” e “to”, che è praticamente la stessa cosa. Io ho usato le percentuali dove 0% è l’inizio e 100% è la fine dell’animazione. Queste sono le poche, anzi pochissime righe css per dar vita a questa splendida animazione, che darà al nostro portfolio un tocco in più.
Conclusioni
Naturalmente queste proprietà css3 non funzionano su tutti i browser, l’ esempio mostrato funziona egregiamente sulle ultime versioni di Chrome, Firefox e Safari, grazie ai prefissi “-webkit-” e “-moz-” che ho utilizzato. Con i keyframes si possono creare animazioni davvero fantastiche senza l’utilizzo di alcun plugins. Ora tocca a te sperimentare! Per oggi è tutto alla prossima.
