Ebbene sì, alla fine ho ceduto alla tentazione e sono andato a cercare di scoprire se esistesse un modo di “attivare” un’azione utilizzando esclusivamente i CSS3 senza far ricorso a jQuery. Così ho scoperto che utilizzando in combinazione la pseudoclasse “:checked” e il selettore “+” è possibile ottenere quanto stavo cercando e che ora vedremo.
Premetto che la funzionalità è ancora limitata, ed essendo vincolata a due stati (checked o no) non permette grandi controlli. Tuttavia ecco i due semplici esperimenti che ho fatto utilizzando alcune proprietà esclusive dei CSS3. Perdonerete la totale mancanza di qualsiasi elemento grafico, vero! Sono solo due esperimenti…
PS: utilizzate Chrome o Firefox 12+ per riuscire a vedere tutto correttamente!
Ruotare un’immagine al click
Il primo esempio è molto carino da vedersi, sicuramente del tutto inutile a livello pratico, ma fa uso della trasformazione CSS3 chiamata “rotateY”. Che cosa fa? Semplicemente ruota un oggetto del DOM rispetto all’asse Y.
Il codice HTML
<div class="animate-wrap"> <input type="checkbox" id="ani-1"/>Ruota immagine 1 <div class="animate"> <img src="01.jpg" width="640" height="480" id="img1"/> </div> </div>
Nota fondamentale: L’oggetto checkbox deve stare immediatamente prima del div “animate”. Già, al momento (confesso di non aver cercato a lungo, quindi se avete altre tecniche vi invito a segnalarle nei commenti) è quanto ho trovato per far avvenire la magia. La magia CSS:
.animate img {
display:block;
position:relative;
}
/* GENERICHE */
.animate-wrap input[type="checkbox"]:checked + .animate img {
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.animate-wrap input[type="checkbox"] + .animate img {
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
/* IMMAGINE 1 */
.animate-wrap input[type="checkbox"]:checked + .animate #img1 {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}Le prime due proprietà mi servivano per dare a tutte le animazioni la stessa durata. 0.5 secondi con effetto ease-out in uscita. Il “trucco” però avviene nell’ultima parte. E’ qui infatti che si dice al browser: prendi l’immagine con id “img1” che sta dentro al div con classe “.animate” che si trova “+” immediatamente dopo il checkbox. Ma fai tutto ciò quando “spunti” il checkbox! Et voilà, la magia si realizza! Non ho ancora capito perchè ritorni da solo allo stato di partenza se tolgo la spunta. Ma tant’è, ci piace così no?
Spostare un’immagine al click: usiamo i keyframes
I keyframes sono il futuro prossimo del CSS. Praticamente sono una sorta di timeline (si come quella di flash) che permette di controllare le animazioni nel tempo. Vi consiglio di buttare un occhio a questo articolo che abbiamo pubblicato di recente su Webhouse, per approfondire un po’ la questione. Ma tornando a bomba sui nostri esempi… Ecco come fare per spostare un’immagine utilizzando solo codice CSS:
Il codice HTML
<div class="animate-wrap"> <input type="checkbox" id="ani-2"/>Sposta immagine 2 <div class="animate"> <img src="02.jpg" width="640" height="480" id="img2"/> </div> </div>
ed il CSS che si occupa di “spostare” l’immagine utilizzando una transizione.
/* KEYFRAMES PER IMMAGINE 2 */
@-webkit-keyframes mymove {
0% { left: 0; }
50% { left: 200px; }
100% { left: 0; }
}
@-moz-keyframes mymove {
0% { left: 0; }
50% { left: 200px; }
100% { left: 0; }
}
@-ms-keyframes mymove {
0% { left: 0; }
50% { left: 200px; }
100% { left: 0; }
}
@-keyframes mymove {
0% { left: 0; }
50% { left: 200px; }
100% { left: 0; }
}
/* IMMAGINE 2 */
.animate-wrap input[type="checkbox"]:checked + .animate #img2 {
-webkit-animation:mymove 1s normal;
-moz-animation:mymove 1s normal;
animation:mymove 1s normal;
}Come vedete prima dobbiamo dichiarare nell’arco di 1 secondo, in che stato si troverà il nostro oggetto del DOM. Al 50% dell’animazione si troverà spostato di 200px a sinistra(dichiara un position:relative o absolute se no non si sposta. Sì okay, è una considerazione niubba ma meglio farla :D).
Note: il nome dell’animazione lo scegliamo noi. Quindi “mymove” può essere pippo, pluto o paperino! Idem per la durata e le %. Ovviamente il 50% di 1 secondo sono 0.5 secondi. Per il resto mi sembra tutto intuitivo, non resta che sbizzarrirsi! Magari con qualche esempio più creativo del mio :S
E’ semplicemente fantastico no?
