Una maschera è semplicemente un'immagine semitrasparente che svolge la funzione di layer sovrapposto alle immagini principali di uno slideshow jQuery. Per ottenere questo effetto è necessario posizionare un elemento vuoto sopra ogni immagine, nasconderlo e quindi mostrarlo al momento dello scorrimento dello slideshow. Vediamo come.
Per questo esempio ho usato tre foto scattate da mio fratello Giancarlo. La struttura HTML che le contiene è la seguente:
<div id="slideshow">
<div id="slideshow-wrapper">
<div class="slide">
<img src="1.jpg" alt="" />
<div class="overlay"></div>
</div>
<div class="slide">
<img src="2.jpg" alt="" />
<div class="overlay"></div>
</div>
<div class="slide">
<img src="3.jpg" alt="" />
<div class="overlay"></div>
</div>
</div>
</div>
Appare evidente che sarà l'elemento con classe overlay a creare l'effetto maschera, cosa che appare ancora più evidente dal codice CSS:
#slideshow {
margin: 2em auto;
width: 650px;
height: 396px;
position: relative;
overflow: hidden;
}
#slideshow-wrapper {
width: 1950px;
height: 396px;
position: relative;
}
#slideshow-wrapper div.slide {
width: 650px;
height: 396px;
float: left;
position: relative;
}
#slideshow-wrapper div.slide img {
display: block;
width: 100%;
height: 100%;
}
#slideshow-wrapper div.slide div.overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: url(mask.png) no-repeat;
display: none;
}
L'immagine sovrapposta è divisa lungo la sua diagonale in due aree: la prima è completamente trasparente, mentre la seconda è semitrasparente. Dato che vogliamo ottenere un effetto di entrata simile ad un taglio lungo la diagonale dell'immagine corrente, useremo il metodo slideDown():
var Slideshow = new function() {
var timer = null,
index = 0,
wrapper = $('#slideshow-wrapper', '#slideshow'),
slides = $('div.slide', wrapper);
var getSlidePositions = function() {
var positions = [];
slides.each(function(i) {
var left = $(this).position().left;
positions[i] = left;
});
return positions;
};
var autoSlide = function() {
var offsets = getSlidePositions();
timer = setInterval(function() {
index++;
if(index == offsets.length) {
index = 0;
$('div.overlay', wrapper).hide();
}
wrapper.animate({
left: - offsets[index]
}, 1000, function() {
slides.eq(index).
find('div.overlay').
slideDown(1000);
});
}, 2000);
};
this.init = function() {
autoSlide();
};
}();
$(function() {
Slideshow.init();
});
Il cuore del nostro codice è racchiuso in queste tre righe:
slides.eq(index).
find('div.overlay').
slideDown(1000);
Usiamo l'indice incrementale del timer per selezionare la slide corrente e quindi il suo elemento sovrapposto. Potete visionare l'esempio finale in questa pagina.