jQuery: slider con slide animate

Possiamo creare con jQuery l'effetto di slide che si alzano e si abbassano dinamicamente ad ogni scorrimento del nostro slideshow. Vediamo insieme i dettagli dell'implementazione.

Usiamo la seguente marcatura:

<div id="slider">
	<div id="slider-wrapper">
		<div class="slide">
			<h2>Slide 1</h2>
			<p>Lorem ipsum dolor sit amet et ibam forte via sacra sicut meus est mos.</p>
		</div>
		<div class="slide">
			<h2>Slide 2</h2>
			<p>Lorem ipsum dolor sit amet et ibam forte via sacra sicut meus est mos.</p>
		</div>
		<div class="slide">
			<h2>Slide 3</h2>
			<p>Lorem ipsum dolor sit amet et ibam forte via sacra sicut meus est mos.</p>
		</div>
	</div>
</div>

Ciascuna slide sarà inizialmente posta in basso tramite il posizionamento relativo:

#slider {
	margin: 2em auto;
	width: 600px;
	height: 300px;
	position: relative;
	overflow: hidden;
	background: #45484d;
background: -moz-linear-gradient(top, #45484d 0%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000));
background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%);
background: -o-linear-gradient(top, #45484d 0%,#000000 100%);
background: -ms-linear-gradient(top, #45484d 0%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 );
background: linear-gradient(top, #45484d 0%,#000000 100%);
}

#slider-wrapper {
	width: 1350px;
	height: 300px;
	position: relative;
	
}

div.slide {
	width: 300px;
	background: #c30;
	float: left;
	color: #fff;
	margin-right: 150px;
	border-radius: 5px 5px 0 0;
	position: relative;
	top: 250px;
}

div.slide h2 {
	font: normal 2em Georgia, serif;
	margin: 0;
	padding: 5px;
	text-align: center;
}

div.slide p {
	padding: 1em;
	margin: 0;
	line-height: 1.4;
}

Con jQuery otteniamo l'offset sinistro di ciascuna slide per far scorrere il contenitore principale e conserviamo tali valori in un array. Accederemo ciclicamente a tale array usando un contatore all'interno di un timer JavaScript. Infine, useremo la funzione di callback del metodo animate() per modificare il valore della proprietà top delle slide, creando così l'effetto di innalzamento:

var Slider = new function() {

	var slider = $('#slider-wrapper', '#slider');
	var slides = $('div.slide', slider);
	var len = slides.length;
	var counter = 0;
	
	var getPositions = function() {
	
		var offsets = [];
		
		slides.each(function(i) {
		
			var left = $(this).position().left;
			offsets[i] = left;
		
		});
		
		return offsets;
	
	};
	
	this.slide = function() {
	
	    var positions = getPositions();
	
		var timer = setInterval(function() {
		
			slides.css('top', '250px');
		
			counter++;
			
			if(counter == len) {
			
				counter = 0;
			
			}
			
			slider.animate({
				left: - positions[counter]
			}, 800, function() {
			
				slides.eq(counter).animate({
					top: 180
				}, 700);
			
			});	
			
		
		
		}, 1500);
	
	
	
	};


}();

$(function() {

	Slider.slide();

});

Potete visionare l'esempio finale in questa pagina.