Oggi analizziamo meglio due animazioni basilari per chi si avvicina al nuovo standard css3. Vediamo infatti come creare thumb con effetto opacità al passaggio del mouse e una panoramica dei “famosi” keyframes css3.
01. Opacità alle thumb al passaggio del mouse con i CSS3
Ecco il codice per effettuare un cambio di opacità al passaggio del mouse utilizzando i potenti CSS3:
.thumbnail{
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.thumbnail:hover{ opacity:0.7;}
Come vedete, per rendere dinamico l’effetto opacità al passaggio del mouse ci basta impostare sulla proprietà hover un’opacità di 0.7, mentre nell’elemento standard impostiamo un tempo di “ritorno alla normalità” che può variare a seconda delle vostre esigenze. In questo caso ho impostato che nel caso l’utente esca dalla thumb essa ritorni ad un’opacità normale dopo 1 secondo.
Come vedete l’effetto ottenuto è ottimo ed è implementabile senza troppe difficoltà e/o righe di codice. Per una versione completamente cross-browser vi invito a leggere questo mio articolo dove imparerete a gestire l’opacità delle thumb tramite l’uso di jQuery.
BROWSER SUPPORTATI: Opera, Firefox, Chrome, Safari, Ie9
BROWSER NON SUPPORTATI: Ie8, ie7,ie6
IMPORTANTE: ricordatevi che le nuove tecniche css3 funzionano su tutti i browser eccetto ie8 e inferiori. Per un completo utilizzo cross browser vi consiglio di integrare all’interno della vostra pagina uno script di richiamo contestuale al browser:
$(document).ready(function() {
if ($.browser.msie) {
$('.thumbnail').css("opacity","0.5"); //seleziono le immagini dentro il div thumb container e setto l'opacità a 0.5
$('.thumbnail').mouseenter( //quando vado sopra con il mouse
function(){ //eseguo la funzione
$(this).css("opacity","1.0"); //this riprende il selettore di prima, setto l'opacità a 1 (100%)
});
$('.thumbnail').mouseleave( //quando levo il mouse
function(){
$(this).css("opacity","0.5"); //rimetto l'opacità a 0.5
});
}
});//fine dom
In questo modo non escluderete dall’animazione anche i (molti) possessori di IE8.
02. Introduzione alle keyframes CSS3
Che cosa sono i keyframes? Immaginate la realizzazione di un cartone animato (quelli della vecchia scuola con carta e penna!). Esistono di base due approcci per la realizzazione:
A) Disegno ciascuna “scena” dell’animazione da eseguire facendo compiere al soggetto tutti i movimenti intermedi per portare a termine l’azione. In questo caso ovviamente i disegni da dover realizzare saranno davvero tantissimi. Se per esempio disegnassimo un giocatore di calcio dovremmo disegnare tutti i suoi movimenti, in perfetta sequenza, che una volta interlacciati renderanno l’animazione fluida ad occhio nudo.
B) Disegno solo la fase iniziale, intermedia e finale dell’animazione. L’animazione viene poi resa fluida tramite programmi o algoritmi ben specifici.
Nel caso dei CSS3 viene bene tener conto della seconda opzione definita in gergo tecnico tweening. sicuramente il concetto di keyframes non è nuovo a chi ha delle basi o conosce il Flash o programmi di video editing, ma mi sembrava doverosa come precisazione per tutti coloro che si avvicinano a questi concetti.
03. Struttura e uso dei keyframes CSS3
Un keyframes va inizializzato come una sorta di funzione PHP o jQuery:
@-webkit-keyframes animazioneDiv
{
0%:{
bottom:0;
left:200px;
}
50%:{
bottom:400px;
left:200px;
}
100%:{
bottom:0;
left:200px;
}
}
In questo esempio particolare ho animato un div che si sposterà in alto e in basso.
Una volta impostati i valori di partenza, intermezzo e fine l’animazione verrà eseguita senza problemi. Ovviamente per poter vedere l’animazione dovete applicarla a un elemento web, come un div, paragrafo o immagine.
#div_da_animare.animate
{
-webkit-animation-name: animazioneDiv;
-webkit-animation-duration: 10s;
}
Ovviamente possiamo applicare all’animazione easing, repeating e molto altro.
Nel prossimo articolo dedicato all’uso dei keyframes CSS3 vedremo un approccio più avanzato, magari con qualche “esempio pratico” di applicazione. Spero vi sia utile a domani!
