Come creare un fading incrociato di immagini in pagine html

Un effetto come la dissolvenza incrociata tra immagini che in Flash risulta semplicissimo da creare, diventa un po’ meno ovvio quando si voglia riprodurlo in una pagina html.
Per fortuna c’è sempre qualcuno che ci pensa prima di noi!

Image Cross Fader Redux è una combinazione Javascript+CSS che fa proprio questo, ed implementarla in una pagina web è semplicissimo:

1. richiamiamo i file .js e .css nei tag HEAD, come al solito;
2. racchiudiamo tutte le immagini che devono susseguirsi nella dissolvenza in un DIV con id=”imageContainer”;
3. modifichiamo nel file xfade2.css il valore di height per adeguarlo alle immagini che useremo.

link: http://slayeroffice.com/code/imageCrossFade/xfade2.html

Articoli simili

1. Ingrandimento di immagini nelle pagine web
2. Lightbox, Lightwindow
3. Creare pulsanti con rollover
4. Grattacapi da fotolitista
5. DVD slideshow GUI

Collegamenti sponsorizzati:

Se l'articolo ti è piaciuto è sempre graditissimo un commento! Se vuoi ricevere le ultime novità dal mio blog puoi anche iscriverti ai Feed RSS (non si paga!). Anche via email. CIAO!!

3 Commenti a “Come creare un fading incrociato di immagini in pagine html”

1. Opera 9.25 Windows XP
   Fabio scrive:
   26 Dicembre 2007 alle 14:16

   Bella, ho utilizzato questo sistema sul mio blog. Il risultato lo puoi trovare qui http://www.girandoilmondo.it/o.....n-campagna

   Il problema ora è un’altro.

   Se oltre ad una serie di immagini, volessi inserirne altre, sempre a scorrimento più sotto, queste non verrebbero visualizzate. Evidentemente quando si utilizza il DIV vengono caricate tutte le immagini in memoria, e riutillizzandolo ancora nella stessa pagina html va tutto in conflitto.

   Esiste un modo per ovviare a questo problema ?

   
2. Mozilla Firefox 2.0.0.11 Windows XP
   DoZ scrive:
   26 Dicembre 2007 alle 15:03

   A naso (ripeto: a naso!) direi che basta modificare la funzione so_init() che c’è nel file js.
   Le assegnerei una variabile scrivendo…
   so_init(nomedelDIV)
   …e al posto di…
   imgs = d.getElementById("imageContainer")
   …scriverei…
   imgs = d.getElementById(nomedelDIV)
   Infine, la riga che richiama la funzione la tirerei fuori dal JS (richiamandola nel body o comunque da qualche altra parte), richiamando la funzione sul DIV che mi interessa; es.: window.attachEvent("onload",so_init("ilmioDIV"))

   
3. Opera 9.25 Windows XP
   fabio scrive:
   26 Dicembre 2007 alle 21:39

   Bella li, grazie.
   Appena ho un po di tempo ci provo

   

Scrivi un commento