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

3 pensieri su “Come creare un fading incrociato di immagini in pagine html”

  1. 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"))

  2. Bella, ho utilizzato questo sistema sul mio blog. Il risultato lo puoi trovare qui

    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 ?

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Ricevi un avviso se ci sono nuovi commenti. Oppure iscriviti senza commentare.

You can add images to your comment by clicking here.