1. Accueil
  2. Tous les snippets
  3. Snippets Javascript
  4. Degrade de texte 2 couleurs

Degrade de texte 2 couleurs

5/5 (1 avis)

Snippet vu 18 483 fois - Téléchargée 28 fois

Commenter

Contenu du snippet

Cette fonction écrit du texte en dégradé à partir de 2 couleurs hexadécimales

Source / Exemple : 


function DEGRADE(texte, couleur1, couleur2)
{
     var rgb=new Array();
     var color,i,j;
     for (i=0;i<3;i++) rgb[i]=new Array();

     //  Les couleurs hexadécimales sont changées en couleurs décimales rgb
     for (i=0;i<3;i++)
     {
          rgb[0][i]=parseInt(couleur1.substring(i*2,i*2+2),16);   //couleur1 rgb
          rgb[1][i]=parseInt(couleur2.substring(i*2,i*2+2),16);   //couleur2 rgb
   
          //  Variables d'incrément de la couleur1
          rgb[2][i]=(rgb[1][i]-rgb[0][i])/texte.length
     }
	
     //  Chaque lettre a sa propre couleur. 
     for (i=0; i<texte.length; i++ ) 
     {
          //  On incrémente au fur et à mesure la couleur1
          color='';
          for (j=0; j<3; j++ ) color+=DEC_HEXA(rgb[0][j] + i * rgb[2][j]);

          //  Affichage d'une lettre
          document.write('<font color="#'+color+'">'+texte.charAt(i)+'</font>');
     }
}

//  Fonction de conversion decimal/hexadecimal
function DEC_HEXA(dec)
{
     var hexa='0123456789ABCDEF';
     return hexa.charAt(Math.floor(dec/16)) + hexa.charAt(dec%16);
}

Conclusion :


La fonction de conversion decimal/hexadecimal ne permet ici que de convertir un nombre compris entre 0 et 255. Si vous en cherchez une autre :

http://www.javascriptfr.com/article.aspx?Val=429

A voir également

Ajouter un commentaire Commentaire
cs_SuperChouquette
Messages postés
37
Date d'inscription
dimanche 24 février 2008
Statut
Membre
Dernière intervention
18 mai 2010
15 avril 2008 à 14:50
Superbe ! c'est exactement ce que je cherchait !
je l'ai un peu améliorer pour que cela puisse être un dégradé de plusieurs couleurs ! si ça intéresse quelqu'un :

<script language="javascript" type="text/javascript">
var nbpart = 0;
var arrayPartieTexte = new Array;

function degraderBicolore(texte, couleur1, couleur2)
{
var rgb=new Array();
var color,i,j;
for (i=0;i<3;i++) rgb[i]=new Array();

// Les couleurs hexadécimales sont changées en couleurs décimales rgb
for (i=0;i<3;i++)
{
rgb[0][i]=parseInt(couleur1.substring(i*2,i*2+2),16); //couleur1 rgb
rgb[1][i]=parseInt(couleur2.substring(i*2,i*2+2),16); //couleur2 rgb

// Variables d'incrément de la couleur1
rgb[2][i]=(rgb[1][i]-rgb[0][i])/texte.length
}

// Chaque lettre a sa propre couleur.
for (i=0; i<texte.length; i++ )
{
// On incrémente au fur et à mesure la couleur1
color='';
for (j=0; j<3; j++ ) color+=DEC_HEXA(rgb[0][j] + i * rgb[2][j]);

// Affichage d'une lettre
document.write(''+texte.charAt(i)+'');
}
}

// Fonction de conversion decimal/hexadecimal
function DEC_HEXA(dec)
{
var hexa='0123456789ABCDEF';
return hexa.charAt(Math.floor(dec/16)) + hexa.charAt(dec%16);
}

function Decouper(txt,nb)
{
if((nb<2)||(txt=="")){ arrayPartieTexte[nbpart] = txt; }
else
{
tmp = txt.substr(0,Math.round(txt.length/nb));
txt2 = txt.substr(Math.round(txt.length/nb));
arrayPartieTexte[nbpart] = tmp;
nbpart = nbpart + 1;
Decouper(txt2,nb-1);
}

}

function Degrader(texte,couleurs)
{
var arrayCouleurs = couleurs.split('|');
var nbrCouleur = arrayCouleurs.length-1;
nbpart = 0;
arrayPartieTexte = new Array;
Decouper(texte,nbrCouleur);

for (i=0;i<nbrCouleur;i++)
{
degraderBicolore(arrayPartieTexte[i],arrayCouleurs[i],arrayCouleurs[i+1]);
}

}

degraderBicolore('test d\' un degrader noir vers blanc !', '000000', 'FFFFFF');
document.write('
');
Degrader('test d\' un degrader multicolore !', '0000ff|ffffff|ff0000');
</script>
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (tarzent)