[JS]Ajouter un effet de "fade" ?

[Eramdam]

Bonjour, j'ai trouvé un petit script qui permet de charger le contenu d'une page dans un div grâce à mootools, mais voilà,j'aimerais que l'apparition soit moins brutale, donc j'aimerais que l'apparition se fasse avec un petit fondu, seulement je n'y connais strictement rien en JS, donc je fais appel à vous

Voici la page du script en question

http://www.phatfusion.net/pageloader/#http...der/content.htm

Merci d'avance

[Bab00n]

Bonjour,

Plusieurs solution : Tu peut réalisé toi même une fonction qui va jouer sur l'opacité pour faire apparaître progressivement une div (ou autre), soit tu peut utilisé un framework qui le propose, comme script.aculo.us par exemple.

Le framework sera un peu plus lourd a charger mais il offre bcp plus de fonctionnalités derrière.

Pour un script fais maison, tu peut faire quelque chose comme sa :

function fade(id, opacStart, opacEnd, millisec){
var speed = Math.round(millisec / 100);
var timer = 0;

if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
	setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
	timer++;
  }
} else if(opacStart < opacEnd) {
	for(i = opacStart; i <= opacEnd; i++) {
		setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
		timer++;
	}
}
}

function changeOpac(opacity, id) {

   var object = document.getElementById(id).style;
   object.opacity = (opacity / 100);
   object.MozOpacity = (opacity / 100);
   object.KhtmlOpacity = (opacity / 100);
   object.filter = "alpha(opacity=" + opacity + ")";
}

pour l'utiliser il te suffit d'apeller la fonction fade avec en paramètre l'id de l'élément sur lequel appliqué le fading, l'opacité de départ et celle de fin et la durée du fade en miliseconde.

[nemesis93_75]

vois aussi avec mootools (vu que c'est ce que tu utilise )

[Zabuza66]

Yop, voici la fonction Fade la plus soft que j'ai trouvé.

Pour ma part je déteste les trucs javascript de 150ko, bonjour les chargements, vive la bande passante, bref passons

var TimeToFade = 1200.0;

function fade(eid)
{
 var element = document.getElementById(eid);
 if(element == null)
return;

 if(element.FadeState == null)
 {
if(element.style.opacity == null
	|| element.style.opacity == ''
	|| element.style.opacity == '1')
{
  element.FadeState = 2;
}
else
{
  element.FadeState = -2;
}
 }

 if(element.FadeState == 1 || element.FadeState == -1)
 {
element.FadeState = element.FadeState == 1 ? -1 : 1;
element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
 }
 else
 {
element.FadeState = element.FadeState == 2 ? -1 : 1;
element.FadeTimeLeft = TimeToFade;
setTimeout("animateFade(" + new Date().getTime()
	+ ",'" + eid + "')", 33);
 } 
}
function animateFade(lastTick, eid)
{ 
 var curTick = new Date().getTime();
 var elapsedTicks = curTick - lastTick;

 var element = document.getElementById(eid);

 if(element.FadeTimeLeft <= elapsedTicks)
 {
element.style.opacity = element.FadeState == 1 ? '1' : '0';
element.style.filter = 'alpha(opacity = '
	+ (element.FadeState == 1 ? '100' : '0') + ')';
element.FadeState = element.FadeState == 1 ? 2 : -2;
return;
 }
element.FadeTimeLeft -= elapsedTicks;
 var newOpVal = element.FadeTimeLeft/TimeToFade;
 if(element.FadeState == 1)
newOpVal = 1 - newOpVal;
element.style.opacity = newOpVal;
 element.style.filter =
  'alpha(opacity = ' + (newOpVal*100) + ')';
 setTimeout("animateFade(" + curTick
  + ",'" + eid + "')", 33);
}

Après c'est un truc du genre fade('fenetre') ;

Voilu voila )