Con jQuery possiamo ruotare e animare le immagini, ma non usando direttamente le proprietà CSS3 che gestiscono la rotazione degli elementi. Infatti queste proprietà, disponibili sotto forma di estensioni dei browser, non sono direttamente accessibili tramite jQuery se si esclude il caso di Safari e Chrome. Per ottenere l'effetto che vogliamo dobbiamo usare le classi CSS. Vediamo come.
Una semplice galleria di immagini:
<div id="container">
<img src="2.jpg" alt="" />
<img src="3.jpg" alt="" />
<img src="4.jpg" alt="" />
<img src="5.jpg" alt="" />
</div>
con stili altrettanto semplici:
#container {
width: 860px;
height: 200px;
margin: 0 auto;
padding: 2em 0;
}
#container img {
float: left;
width: 200px;
height: 150px;
margin-right: 5px;
cursor: pointer;
position: relative;
}
se non fosse per questa classe CSS che fa ruotare l'immagine di 5 gradi in senso antiorario:
img.rotated {
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
}
Quando l'utente passa col mouse su un'immagine, questa si deve sollevare lentamente, ruotare e quindi ritornare allo stato iniziale quando il mouse si allontana dall'immagine. Il codice jQuery stavolta è veramente intuitivo:
$(function() {
$('img', '#container').each(function() {
var $img = $(this);
$img.hover(function() {
$img.stop(true, true).animate({
top: - 32
}, 'slow', function() {
$img.addClass('rotated');
});
}, function() {
$img.stop(true, true).animate({
top: 0
}, 'slow', function() {
$img.removeClass('rotated');
});
});
});
});
Dopo che l'animazione è completa, jQuery semplicemente rimuove la classe CSS dall'immagine corrente, che ritorna allo stato originale. Al contrario, quando l'immagine si è sollevata, jQuery aggiunge la classe CSS che permette la rotazione.
Potete visionare l'esempio finale in questa pagina.