10.7.06

FadeIn e FadeOut con javascript

Effetto carino da usare sul web.
Problema : Flash è uno sperco per una cosa cosi semplice, le gif animate pesano troppo.

Soluzione: Javascript e CSS !


Funzione de inizializzazione :


function initImage() {
// start
imageId = 'uno';
var uno = document.getElementById(imageId);
imageId = 'due';
var due = document.getElementById(imageId);
imageId = 'tre';
var tre = document.getElementById(imageId);
imageId = 'quattro';
var quattro = document.getElementById(imageId);
setOpacity(uno, 100);
setOpacity(due, 100);
setOpacity(tre, 100);
setOpacity(quattro, 100);
loop();
}


Prendiamo ad esempio 4 immagini con ID uno, due, tre e quattro. La prima, l'immagine di partenza avrà opacità 100, le altre 0.


L'opacità la andiamo a settare con questa funzione, che con particolari accorgimenti funziona sul 99.9% dei browser


function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}


La funzione Loop poi si preoccupa di far partire gli effetti di Fade-in e Fade-out in precisi momenti grazie alla funzionalità setTimeout.


function loop() {
fadeOut('uno',100);
fadeIn('due',0);
window.setTimeout("fadeOut('due',100)", 2000);
window.setTimeout("fadeIn('tre',0)", 2000);
window.setTimeout("fadeOut('tre',100)", 4000);
window.setTimeout("fadeIn('quattro',0)", 4000);
window.setTimeout("fadeOut('quattro',100)", 6000);
window.setTimeout("fadeIn('uno',0)", 6000);
window.setTimeout("loop()", 8000);
}


Il primo parametro è la funzione da richiamare, il secondo è il ritardo con cui farlo. Espresso in millisecondi.


Ed ecco le funzioni di fade in e fade out, molto simili tra loro. Utilizzano anch'esse il setTimeout


function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 5;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
} else {
return 0;
}
}
}


function fadeOut(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity >= 0) {
setOpacity(obj, opacity);
opacity -= 5;
window.setTimeout("fadeOut('"+objId+"',"+opacity+")", 100);
} else {
return 0;
}
}
}


Mentre per quanto riguarda l'HTML la struttura deve essere questa:


Nel body ci va :
<body bgcolor="#ffffff" onLoad="initImage()">


e nel testo si mette una cosa del genere opportunamente adattata al vostro caso:
<div id="container" style="position:relative; left:0px; top:0px; width:395px; height:322px; z-index:1; overflow:hidden; ">
<div id="Image1" style="position:relative; left:0px; top:0px; width:395px; height:322px; z-index:2;"><img id='uno' src="images/HP_img1.gif"></div>
<div id="Image2" style="position:relative; left:0px; top:-322px; width:395px; height:322px; z-index:5; overflow: hidden;"><img id='due' src="images/HP_img2.gif"></div>
<div id="Image3" style="position:relative; left:0px; top:-644px; width:395px; height:322px; z-index:10; overflow: hidden;"><img id='tre' src="images/HP_img3.gif"></div>
<div id="Image4" style="position:relative; left:0px; top:-966px; width:395px; height:322px; z-index:15; overflow: hidden;"><img id='quattro' src="images/HP_img4.gif"></div></td>
</div>


Il container non è opzionale, come anche l'overflow:hidden.
Da notare anche il top progressivamente sempre piu negativo in modo che si sovrappongano.

1 commento:

b0sh ha detto...

Altre informazioni sull'utilizzo del filtro opacity : http://redonweb.blogspot.com/2007/03/usare-il-filtro-opacity-in-internet.html