jQuery | 08/09/2011 | Gabriele Romanato

jQuery: effetto cover flow

L'effetto al quale mi sono ispirato per questo esempio è la visualizzazione in stile cover flow delle cartelle in Mac OS X. Sinceramente, la parte più difficile dell'esempio non è stata quella relativa all'utilizzo dell'oggetto slider() di jQuery UI, quanto piuttosto l'assegnazione dei corretti stili CSS alle immagini. Vediamo insieme i dettagli.

Oltre alla libreria jQuery UI, per il nostro esempio abbiamo bisogno di inserire anche un riferimento al foglio di stile di un tema di questa libreria:


<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-darkness/jquery-ui.css" type="text/css" media="screen" />
</head>

Quindi possiamo definire la marcatura del nostro esempio:


<div id="coverflow">
	<img src="1.jpg" alt="" class="front" />
	<img src="2.jpg" alt="" class="side-1" />
	<img src="3.jpg" alt="" class="side-2" />
	<img src="4.jpg" alt=""  class="side-3"/>
	<img src="5.jpg" alt="" class="side-4" />
</div>
<div id="slider"></div>

Nel CSS dobbiamo usare le classi specificate per posizionare le immagini avendo la prima centrata in orizzontale e in verticale, e le altre posizionate in modo scalare alla sua destra. Giocheremo con i valori delle proprietà right, top e z-index per creare questo effetto scalare:


body {
	margin: 0;
	padding: 0;
}

#coverflow {
	width: 100%;
	height: 280px;
	background: #000;
	margin: 0;
	position: relative;
	overflow: hidden;
}

#coverflow img {
	position: absolute;
	top: 50%;
	margin-top: -75px;
	width: 250px;
	height: 150px;
}

#coverflow img.front {
	
	left: 50%;
	top: 50%;
	margin-left: -175px;
	z-index: 5;
}

#coverflow .side-1 {
	right: 300px;
	z-index: 4;
}
#coverflow .side-2 {
	z-index: 3;
	right: 280px;
	top: 48%;
}

#coverflow .side-3 {
	right: 260px;
	z-index: 2;
	top: 46%;
}

#coverflow .side-4 {
	right: 240px;
	top: 44%;
	z-index: 1;
}

#coverflow .side-5 {

	right: 260px;
	top: 42%;
	z-index: 0;

}

#slider {
	width: 500px;
	margin: 1em auto;
}

Con jQuery non dobbiamo fare altro che associare l'evento slide dello slider al suo valore (value) che cambia a seconda se si scorre il controllo da sinistra verso destra (aumenta) o da destra verso sinistra (diminuisce). Dobbiamo anche assegnare allo slider un valore minimo e massimo per impedire al valore di superare il numero delle immagini. Quindi useremo tale valore come indice del metodo eq() per selezionare l'immagine corrente e cambiare la sua classe CSS in modo da mostrare sempre un'immagine alla volta al centro del contenitore.


$(function() {
	

	var images = $('img', '#coverflow');
	var limit = images.length - 1;   

	$('#slider').slider({
		min: 0,
		max: limit,
		slide: function(event, ui) {
		
			var index = ui.value;
			
			if(index == 0) {
			
				images.eq(index).toggleClass('front').siblings().
				removeClass('front');	
			
			} else {
			    
			    
				images.eq(index).toggleClass('front', 'slow').
				siblings().removeClass('front');
				images.eq(0).addClass('side-5');
			}
			
			
			
	   }
		
    });

});

Solo un'immagine per volta può avere la classe CSS front che la pone al centro del contenitore. jQuery UI estende i metodi jQuery per le classi CSS in modo da creare effetti di animazione come con gli altri metodi jQuery per le animazioni.

Potete visionare l'esempio finale in ~~questa pagina~~.