Afficher un texte avec un dégradé de couleurs



Degrade(0,200,0,255,0,100,"Voici un exemple de texte multi-couleur...");

<html>
<head>
<title>Texte multi-couleur</title>
<script LANGUAGE="JavaScript">
<!--
//construction du tableau des valeurs hexadécimales
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 toHexa(n) {
//fonction de conversion de décimal à hexadécimal
  if (n < 0) return "00";
  if (n > 255) return "FF";
  return "" + hexa[Math.floor(n/16)] + hexa[Math.floor(n%16)];
}

function Degrade(dr,dg,db,fr,fg,fb,texte) {
//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
// texte : texte à afficher en couleur

  var steps = texte.length;
  cr = dr;
  cg = dg;
  cb = db;
  sr = (fr - dr) / steps;
  sg = (fg - dg) / steps;
  sb = (fb - db) / steps;
  for (var x = 0; x <= steps; x++) {
    document.write('<FONT COLOR="#' + toHexa(cr) + toHexa(cg) + toHexa(cb) + '">');
    document.write(texte.charAt(x));
    document.write('</FONT>');
    cr += sr; cg += sg; cb += sb;
  }
}

Degrade(255,100,0,100,0,255,"Voici un exemple de texte multi-couleur...");
//-->
</script>
</head>

<body>

</body>
</html>

Je vous conseille de ne pas mettre de texte trop long car cela ralentit la vitesse d'affichage de la page.

 

Textes en forme de vagueRetour à la page JavaScriptUn texte qui ondule