È 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 (58 download)

Lascia un commento