Come creare un fading incrociato di immagini in pagine html
Forse potrebbe interessarti anche...
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:
- richiamiamo i file .js e .css nei tag HEAD, come al solito;
- racchiudiamo tutte le immagini che devono susseguirsi nella dissolvenza in un DIV con id=”imageContainer”;
- modifichiamo nel file xfade2.css il valore di height per adeguarlo alle immagini che useremo.
link: http://slayeroffice.com/code/imageCrossFade/xfade2.html
Link sponsorizzati
dissolvenza 3 immagini per insrimento in sito web, javascript immagini dissolvenza, immagini dissolvenza html, immagini effetto fader, scorrimento immagini php, scorrimento immagini in dissolvenza, scorrimento foto html, rollover html5 e css3, rollover con transizione, php html slideshow immagini rollover, immagine fade, inserire testo tra due immagini html, immagini in dissolvenza in javascript, immagini in dissolvenza html, immagini fading, scorrimento pagine html in css, scorrimento tra le pagine sito web, xfade2 slide in una pagina, wordpress fade immagini, transizioni javascript, transizioni html testp, transizioni html, transizioni css e javascript con dissolvenza, transizioni con effetto dissolvenza, slideshow con testo fade, slideshow con dissolvenza immagini, script scorrimento foto html, script java per dissolvenza immagini su sito, script immagini fading, script immagini dissolvenza, script di feding, immagine dissolvenza javascript, immagine con dissolvenza html, html script immagini dissolvenza, effetti dissolvenza immagini css, dissolvenza tra due immagini, dissolvenza incrociata tra pagine web, dissolvenza incrociata foto sito, dissolvenza immagini css, dissolvenza immagini con html5, come creare un immagine con effetto dissolvenza, CSS3 transizioni immagini, creare immagini in dissolvenza, creare dissolvenza immagini, creare 2 immagini fade, comporre immagini web javascript, come fare dissolvenza tra 2 immagini, effetti dissolvenza incrociata foto, effetto fade apertura immagini, effetto fade css immagini, html immagini dissolvenza, html dissolvenza, flash transizione fading, flash fade di immagini, flash dissolvenza incrociata.
Bella, ho utilizzato questo sistema sul mio blog. Il risultato lo puoi trovare qui http://www.girandoilmondo.it/ordinary-life/171/cena-prenatalizia-tra-amici-nella-villa-in-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 ?
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"))Bella li, grazie.
Appena ho un po di tempo ci provo