È da alcuni giorni che tento di mettere ordine script, snippets e vecchi lavori nei meandri della mia “scatola di metallo e silicio”. Ho pensato allora di pubblicarli per cancellarli dal pc. Tra questi ho trovato una funzione di background fading, che mi è tornata utile in migliaia di situazioni diverse.
Oggi andremo a vedere uno script che permette di realizzare una transizione tra più immagini con l’effetto dissolvenda. Di seguito troverete la funzione e le specifiche per avviarla in maniera corretta.
function fader( string , array , int )
Specifiche tecniche
string: prende il nome della classe dell’oggetto nel quale di desidera eseguire il fading
array: array monodimensionale, (o vettore), contenente il percorso delle immagini che si desidera utilizzare
int: intervallo, espresso in secondi, di quanto tempo deve passare prima che si passi all’immagine successiva
Esempio
<html><head>
<script language=”javascript”>
var immagini = new Array(
‘http://www.the-passenger.it/images/…/heineken-retrored2blomo.jpg’,
‘http://www.the-passenger.it/images/…/hotel-750×500.jpg’,
‘http://www.the-passenger.it/images/…/waves.jpg’,
‘http://www.the-passenger.it/images/…/lomonycfeet.jpg’,
‘http://www.the-passenger.it/images/…/water47.jpg’
);
var intervallo = 5;
var obj = “bgFader”;
fader( obj, immagini, intervallo );
</script>
</html><head>
<div class=”bgFader”></div>
<div></div>
</body></html>
Si tratta di un effetto che può essere applicato, sullo sfondo di una pagina o come transizione autimatica per uno slideshow, a voi la scelta e Buon divertimento !
Download sample: jQuery Background fader (127 download)