L’effetto dissolvenza tra due immagini può sottolineare un collegamento, il logo, una serie d’immagini di una galleria fotografica o un’altra area importante di una pagina web.

La dissolvenza si può realizzare con le proprietà css opacity e transition che però non sono supportate dai browser meno recenti. Per questi ultimi si può implementare una tecnica alternativa molto semplice basata su Modernizr e jQuery.

Il codice html

L’effetto dissolvenza può essere applicato a una singola immagine o a una serie di immagini.

Nell’esempio si utilizza una lista (ul) in cui ciascun elemento (li) contiene l’immagine iniziale (in bianco e nero) e finale (a colori).

<ul>
    <li>
    <img src="images/2bn.png" width="240" height="180">
    <img src="images/2.png" width="240" height="180" class="end">
    </li>
    <li>
    <img src="images/3bn.png" width="240" height="180">
    <img src="images/3.png" width="240" height="180" class="end">
    </li>
    <li>
    <img src="images/4bn.png" width="240" height="180">
    <img src="images/4.png" width="240" height="180" class="end">
    </li>
</ul>

All’immagine finale è assegnata la classe .end così da poterla selezionare e nascondere con i fogli di stile.

Demo

Includere Modernizr

Modernizr è una libreria javascript che rileva le proprietà CSS3 supportate dal browser e consente allo sviluppatore di implementare una tecnica alternativa se la proprietà che si desidera utilizzare non è supportata.

Quando il browser carica la pagina esegue il codice javascript della libreria e aggiunge all’elemento html una classe per ciascuna caratteristica testata.

Se il browser supporta la proprietà transition Modernizr aggiunge la classe csstransition.

La classe aggiunta da Modernizr nei browser che supportano le transizioni css

La classe aggiunta da Modernizr nei browser che supportano le transizioni css

Se il browser non supporta la proprietà transition viene aggiunta la classe no-csstransition.

La classe aggiunta da Modernizr nei browser che non supportano le transizioni css

La classe aggiunta da Modernizr nei browser che non supportano le transizioni css 

Come si vedrà più avanti, la classe aggiunta da Modernizr consente di creare delle regole css dedicate solo ai browser che supportano la proprietà transition.

La versione più aggiornata di Modernizr può essere scaricata dal sito ufficiale. Si consiglia di personalizzare Modernizr selezionando solo i test relativi alle proprietà che s’intende utilizzare.

Modernizr deve essere inclusa nelle intestazioni del documento prima dei fogli di stile.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sintesi-Design.it</title>
<script src="js/modernizr.transition.js"></script>
<style>
</style>
</head>
<body>
<ul>
    <li>
    <img src="images/2bn.png" width="240" height="180">
    <img src="images/2.png" width="240" height="180" class="end">
    </li>
    <li>
    <img src="images/3bn.png" width="240" height="180">
    <img src="images/3.png" width="240" height="180" class="end">
    </li>
    <li>
    <img src="images/4bn.png" width="240" height="180">
    <img src="images/4.png" width="240" height="180" class="end">
    </li>
</ul>
<script src="js/jquery-1.10.2.min.js"></script>
</body>
</html>
Per ulteriori informazioni su consultare il tutorial su Modernizr in questo sito.

Effetto dissolvenza con i css

Il foglio di stile dispone le immagini affiancate e realizza l’effetto di dissolvenza nei browser che supportano la proprietà transition.

Le prime regole del foglio di stile css descrivono l’aspetto iniziale delle immagini e contengono proprietà largamente supportate da tutti i browser.

Rimuovere i simboli della lista, il margine e il padding all’elemento ul.

ul{
        list-style:none;
        margin:0;
        padding:0; 
}

Affiancare gli elementi li disponendoli come elementi in linea riducendo, allo stesso tempo, lo spazio occupato da ciascun elemento alle dimensioni delle immagini.

ul li{
        display:inline;    
}

Le due immagini presenti in ciascun li sono visualizzate una accanto all’altra, come si può vedere nella seguente immagine.

Posizionamento delle immagini

Posizionamento delle immagini

Per ottenere l’effetto dissolvenza è necessario sovrapporre le due immagini e poi, nascondere quella a colori.

Posizionare gli elementi li in modo relativo in modo da poter disporre, rispetto ad essi, le immagini presenti al loro interno.

ul li{
        display:inline;
        position:relative;        
}

Posizionare in modo assoluto l’immagine finale della transizione, quella a colori, in modo da sovrapporla all’immagine iniziale.

ul li img.end{
	position:absolute; 
	left:0; 
}

L’immagine a colori (quella con classe .end) si trova sopra l’immagine in bianco e nero perché è successiva ad essa e perciò ha il valore della proprietà z-index maggiore.

Le regole che realizzano l’effetto dissolvenza tra le due immagini utilizzano un selettore composto che inizia con la classe inserita da Modernizr, cioè la classe csstransition, per evitare che lo stile sia applicato anche dai browser che non supportano transition e opacity.

.csstransitions ul li img.end{
    /* Sovrappone e nasconde l'immagine a colori*/
}
.csstransitions ul li img.end:hover{
    /* Visualizza l'immagine a colori*/
}

Entrambe le regole css si riferiscono all’immagine a colori, quella con classe .end, che viene prima nascosta e poi, visualizzata quando il mouse si sovrappone ad essa.

Nei browser che non supportano la proprietà transition l’immagine a colori sarà nascosta direttamente da jQuery.

Nascondere l’immagine a colori  impostando a zero la sua opacità. Indicare anche la durata della transizione, nell’esempio la durata è di 1 secondo.

.csstransitions ul li img.end{
	opacity:0; 
	transition: 1s;
}

La regola della pseudoclasse :hover visualizza progressivamente l’immagine a colori modificandone l’opacità.

.csstransitions ul li img.end:hover{
	opacity:1; 
	transition: 1s; 
}

Anche in questa regola indicare la durata della transizione (può anche essere diversa da quella indicata nella regola precedente).

Demo

Effetto dissolvenza con jQuery

Scaricare jQuery 1.x.x, quella destinata ai browser obsoleti e poi, includerla alla fine del documento, subito prima del tag di chiusura dell’elemento body.

Dopo aver incluso jQuery, inserire un altro elemento script per le proprie istruzioni.

<script src="js/jquery-1.10.2.min.js"></script>
<script>

$(function(){ 
	if (!Modernizr.csstransitions){		
		
		$('.end').hide(); 
		/* Per nascondere l'immagine si può usare anche la classe 
		   .no-csstransitions inserita da Modernizr  */
 		$('.no-csstransitions ul li').hover(function(){
	 		$(this).find('.end').stop(true,true).fadeIn(1000);
 		}, function(){
	  		$(this).find('.end').fadeOut(1000)
	 	});
	 }
});

</script>

Il primo blocco assicura che le istruzioni vengano eseguite quando il documento è pronto per essere manipolato.

$(function(){ 
	// Codice eseguito quando il dom è pronto
});

Lo script jQuery deve essere eseguito solo se il browser non supporta la proprietà transition. Per questa verifica si usa la proprietà csstransition dell’oggetto Modernizr che restituirà false se la proprietà non è supportata.

if (!Modernizr.csstransitions){		
	// Istruzioni eseguite se la proprietà transition non è supportata
}

Se il browser non supporta le transizioni css allora si utilizzerà un piccolo script jQuery.

Nascondere le immagini a colori (quelle con classe .end) con il metodo hide() di jQuery.

$('.end').hide();

Dopo aver nascosto le immagini, associare a ciascun elemento della lista il metodo hover() che gestisce l’evento di sovrapposizione del mouse.

Il metodo hover() richiede due parametri:

  • la funzione da chiamare quando il mouse si sovrappone all’oggetto a cui è applicato (mouseenter)
  • la funzione da chiamare quando il mouse esce dall’oggetto (mouseleave)
$('.no-csstransitions ul li').hover(
	function(){
		// mouseenter

	}, 
	function(){
		// mouseleave
	}
);

La prima funzione passata al metodo hover() seleziona l’immagine con classe .end, contenuta nell’elemento li a cui si è sovrapposto il mouse, e la visualizza.

function(){
	// mouseenter
	$(this).find('.end').stop(true,true).fadeIn(1000);
}

Le istruzioni presenti in questa funzione sono concatenate tra loro:

  1. La funzione jQuery $(this) seleziona l’elemento della lista (elemento li) su cui si è verificato l’evento mouseenter.
  2. Il metodo find() seleziona l’elemento con classe .end (l’immagine a colori) annidato all’interno dell’elemento li selezionato in precedenza.
  3. Il metodo stop() elimina la coda delle animazioni e termina la transizione immediatamente anche se l’utente si sposta ripetutamente sulle immagini.

La seconda funzione, chiamata quando il mouse esce dall’elemento li, seleziona l’immagine a colori, quella con classe .end, e la nasconde con il metodo fadeOut().

function(){
	$(this).find('.end').fadeOut(1000)
}

L’effetto dissolvenza realizzato potrà essere visualizzato in modo molto simile sia nei browser che supportano le transizioni css3 che in quelli meno recenti.

Demo