Effetto immagini animate da inserire in un blog.

Illustrerò questo effetto per un blog su Blogger ma il codice potrà essere utilizzato anche su altre piattaforme visto che si basa su una libreria JQuery supportata da tutti i browser. Il concetto è quello di mostrare una immagine sotto a un'altra che appaia tramite scorrimento della prima quando ci si passa sopra con il mouse. Prima di procedere con il procedimento di installazione, vi invito a visualizzare l'effetto che ho creato in un post di prova

• Demo Effetto Immagini Animate Sovrapposte -

Per ottenerlo occorre andare su Design > Modifica HTML e salvare il modello completo. Cercare la riga </head> e, immediatamente sopra incollare questo codice

<!--EFFETTO ANIMAZIONE IMMAGINI-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function() {
  $('.animazione').hover(function() {
    $(this).children('.frontale').stop().animate({ "top" : "150px"}, 700);
  }, function() {
    $(this).children('.frontale').stop().animate({ "top" : "0px"}, 200);
  });
});
//]]>
</script>
<!--EFFETTO ANIMAZIONI IMMAGINI - www.ideepercomputeredinternet.com-->

Adesso cercare la riga ]]></b:skin> e, immediatamente sopra, incollare quest'altro codice

/* EFFETTO ANIMAZIONE */
.animazione{
  cursor: pointer;
  height: 150px;
  overflow: hidden;
  position: relative;
  top: 0;
  width: 200px;
}
.animazione img {
  height: 150px;
  left: 0;
  position: absolute;
  top: 0;
  width: 200px;
}

Salvare il modello. Per ottenere l'effetto per foto pubblicate in un post o in immagini inserite nelle pagine statiche o nelle sidebar, dobbiamo pubblicarle con questa sintassi

<div class="animazione">
<img src="URL Immagine nascosta" />
<img class="frontale" src="URL Immagine frontale" /></div>

dove dovranno essere inseriti gli indirizzi delle immagini precedentemente caricate su servizi quali Picasa o SkyDrive. In condizioni normali sarà visibile l'immagine frontale che si sposterà mostrando la seconda al passaggio del mouse. Sia che si usi l'Editor di Blogger o si preferisca Windows Live Writer, questa operazione va fatta in Modalità HTML. Si possono inserire le immagini anche tramite URL e poi incollare le due stringhe class="animazione" e class="frontale" passando alla visualizzazione HTML.

Ulteriori personalizzazioni dell'Effetto delle immagini sovrapposte

Con questo codice le immagini dovranno avere una dimensione di 200x150 pixel. Si possono variare le dimensioni modificando i parametri evidenziati di rosso. Le due velocità 700 e 200, evidenziate di viola, si riferiscono rispettivamente allo scorrimento della immagine frontale più lento (700) e al suo ripristino (200) più veloce.

Lo scorrimento avviene dall'alto verso il basso ma possiamo configurarlo anche dal basso verso l'alto

$('.animazione').hover(function() {
    $(this).children('.frontale').stop().animate({ "top" : "-150px"}, 700);
  }, function() {
    $(this).children('.frontale').stop().animate({ "top" : "0px"}, 200);// si alza di 150 pixel

Si può anche creare uno spostamento verso destra

// verso destra
$(this).children('.frontale').stop().animate({ "left" : "200px"}, 700);  // si muove di 200 pixel a destra
........

$(this).children('.frontale').stop().animate({ "left" : "0px"}, 200); });

oppure uno spostamento della prima immagine verso sinistra

// verso sinistra
$(this).children('.frontale').stop().animate({ "left" : "-200px"}, 700);  // si muove di 200 pixel a sinistra

........

$(this).children('.frontale').stop().animate({ "left" : "0px"}, 200); });

Da notare che in questo caso nel codice muta solo il segno dello spostamento come è ovvio che sia. Queste personalizzazioni sono compatibili con quelle della dimensione delle immagini e della velocità di scorrimento. Si possono inserire anche i tag ALT a beneficio dei motori di ricerca e TITLE che mostrerà ai navigatori il titolo della immagine mentre la puntano con il mouse. Per non appesantire troppo la trattazione li ho volutamente tralasciati.