Fade (dégradé du fond d'écran)

Le fading, c'est faire apparaître progressivement le fond d'écran d'une page à partir d'une couleur pour finir à la couleur définitive de la page. Cela fonctionne si on ne met pas d'image de fond sur la page.

Le code

<html>
<head>
<title>Exemple de fading</title>
</head>
<body>
<script LANGUAGE="JavaScript">
<!--
//construction d'un tableau qui contiendra les caractères hexadécimaux
var hexa = new Array(16);
for(var i = 0; i < 10; i++) hexa[i]=i;
hexa[10] = "A";
hexa[11] = "B";
hexa[12] = "C";
hexa[13] = "D";
hexa[14] = "E";
hexa[15] = "F";

function toHex(i) {
//convertit une valeur décimale en valeur hexadécimale
if (i < 0) return "00";
if (i > 255) return "FF";
return "" + hexa[Math.floor(i/16)] + hexa[Math.floor(i%16)];
}

function setbgColor(R,G,B) {
//fonction qui met à jour la couleur de fond de la page
var r = toHex(R);
var g = toHex(G);
var b = toHex(B);

document.bgColor = "#"+r+g+b;
}

function fade(dR,dG,dB,fR,fG,fB,pas) {
//paramètres :
// dR est la couleur rouge de début
// dG est la couleur verte de début
// dB est la couleur bleue de début
// fR est la couleur rouge de fin
// fG est la couleur verte de fin
// fB est la couleur bleue de fin
// pas est la vitesse, il varie de 2 (vite) à 255 (lent)

for( var i = 0; i <= pas; i++) {
    setbgColor(
      Math.floor(dR * ((pas-i)/pas) + fR * (i/pas)),
      Math.floor(dG * ((pas-i)/pas) + fG * (i/pas)),
      Math.floor(dB * ((pas-i)/pas) + fB * (i/pas)));
}
}

//appel de la fonction fade
fade(0,0,0,255,255,255,40);
//-->
</script>
</body>
</html>

Testez la fonction fade

couleurs de début
rouge	vert	bleu
couleurs de fin
rouge	vert	bleu
pas