In questo articolo vorrei portarvi nel cuore di uno slider jQuery per illustrare due effetti che potrete poi usare negli slider di vostra creazione: la scomposizione delle immagini in bande verticali ed in quadrati. Si tratta di due effetti che una volta implementati faranno assomigliare il vostro slider ad uno slider Flash. Per i nostri esempi useremo il codice di Nivo Slider, sicuramente uno tra gli slider jQuery più conosciuti.
Scomposizione in bande verticali
Nivo implementa le bande verticali (slices) con la seguente funzione:
// Add slices for slice animations
var createSlices = function(slider, settings, vars){
for(var i = 0; i < settings.slices; i++){
var sliceWidth = Math.round(slider.width()/settings.slices);
if(i == settings.slices-1){
slider.append(
$('<div class="nivo-slice"></div>').css({
left:(sliceWidth*i)+'px', width:(slider.width()-(sliceWidth*i))+'px',
height:'0px',
opacity:'0',
background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%'
})
);
} else {
slider.append(
$('<div class="nivo-slice"></div>').css({
left:(sliceWidth*i)+'px', width:sliceWidth+'px',
height:'0px',
opacity:'0',
background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%'
})
);
}
}
}
Le slice vengono aggiunte come elementi posizionati. La larghezza iniziale di una slice viene calcolata dividendo la larghezza dello slider per il numero di slice impostato nelle opzioni. L'offset sinistro di una slice viene calcolato moltiplicando la larghezza iniziale della slice per un intero progressivo ottenuto dall'indice corrente del ciclo for.
La larghezza finale viene calcolata sottraendo alla larghezza totale dello slider la larghezza iniziale della slide moltiplicata per il medesimo intero progressivo. Ogni slice inizialmente ha un'altezza e un'opacità pari a 0. Quindi avviene la magia: viene usata la proprietà CSS background impostando come immagine di sfondo l'immagine corrente dello slider.
Qui è fondamentale l'asse x della proprietà background-position:
((sliceWidth + (i * sliceWidth)) - sliceWidth)
Ad esempio, se la larghezza è 20 avremo:
((20 + (1 * 20)) - 20)
ossia 40 - 20 = 20. Se l'indice i aumenta, aumenterà anche il valore dell'asse x dell'immagine di sfondo. In questo modo l'immagine corrente verrà suddivisa in tante bande aventi la stessa immagine come sfondo ma con un valore diverso della proprietà background-position che creerà l'illusione della scomposizione.
Quindi ad ogni scorrimento dello slider vanno individuati gli elementi che creano la scomposizione e animati. In questo caso, vanno modificate l'altezza e l'opacità.
Scomposizione in quadrati
Ecco l'effetto della scomposizione in quadrati (boxes):
// Add boxes for box animations
var createBoxes = function(slider, settings, vars){
var boxWidth = Math.round(slider.width()/settings.boxCols);
var boxHeight = Math.round(slider.height()/settings.boxRows);
for(var rows = 0; rows < settings.boxRows; rows++){
for(var cols = 0; cols < settings.boxCols; cols++){
if(cols == settings.boxCols-1){
slider.append(
$('<div class="nivo-box"></div>').css({
opacity:0,
left:(boxWidth*cols)+'px',
top:(boxHeight*rows)+'px',
width:(slider.width()-(boxWidth*cols))+'px',
height:boxHeight+'px',
background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((boxWidth + (cols * boxWidth)) - boxWidth) +'px -'+ ((boxHeight + (rows * boxHeight)) - boxHeight) +'px'
})
);
} else {
slider.append(
$('<div class="nivo-box"></div>').css({
opacity:0,
left:(boxWidth*cols)+'px',
top:(boxHeight*rows)+'px',
width:boxWidth+'px',
height:boxHeight+'px',
background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((boxWidth + (cols * boxWidth)) - boxWidth) +'px -'+ ((boxHeight + (rows * boxHeight)) - boxHeight) +'px'
})
);
}
}
}
}
La procedura è la medesima vista per le slice, ma con una differenza: nel caso dei box abbiamo anche bisogno dell'altezza dei box. L'altezza iniziale viene calcolata dividendo l'altezza dello slider per l'altezza specificata nelle opzioni. Un'altra differenza sostanziale sta nell'uso della proprietà background. In questo caso infatti occorre avere sia l'asse x che quello y della proprietà background-position.
Come si ottengono questi valori? Usando sia i valori di altezza che quelli di larghezza dei box, usando la stessa procedura vista in precedenza. Anche in questo caso l'indice progressivo permetterà di avere valori diversi che daranno l'illusione di un'immagine scomposta in tanti quadrati.