Dégradé de texte

Soyez le premier à donner votre avis sur cette source.

Vue 6 252 fois - Téléchargée 299 fois

Description

Petite fonction pour retourner un texte html en dégradé

Conversion hex inclues

Explication des variables :
R1, G1, B1 : color1 décomposé
R2, G2, B2 : color2 décomposé
FR, FG, FB : facteurs de la différence de couleur par lettre

Exemple d'utilisation : html = degrade('1234567890', '000000', 'FFFFFF');

Source / Exemple :


function d2h(d) {
    var tmp = d.toString(16);
    if (tmp.length < 2) {tmp = "0" + tmp;}
    return tmp;
}
function h2d(h) { return parseInt(h, 16); }
function degrade(text, color1, color2) {
    var len = text.length;
    var R1, G1, B1;
    var R2, G2, B2;
    var FR, FG, FB;
    var tmp = "";
    R1 = h2d(color1.substr(0, 2)); G1 = h2d(color1.substr(2, 2)); B1 = h2d(color1.substr(4, 2));
    R2 = h2d(color2.substr(0, 2)); G2 = h2d(color2.substr(2, 2)); B2 = h2d(color2.substr(4, 2));
    FR = (Math.abs(R1 - R2) / len); FG = (Math.abs(G1 - G2) / len); FB = (Math.abs(B1 - B2) / len);
    for (var i = 1; i <= len; i++) {
        if(i == 1){
            tmp += '<font color="#' + color1 + '">' + text.substring(i - 1, i) + '</font>';
        }else{
            var R, G, B;
            if (R1 >= R2) { R = Math.abs( R1 - Math.round(FR * i)); } else { R = R1 + Math.round(FR * i); }
            if (G1 >= G2) { G = Math.abs( G1 - Math.round(FG * i)); } else { G = G1 + Math.round(FG * i); }
            if (B1 >= B2) { B = Math.abs( B1 - Math.round(FB * i)); } else { B = B1 + Math.round(FB * i); }
            tmp += '<font color="#' + d2h(R) + d2h(G) + d2h(B) + '">' + text.substring(i - 1, i) + '</font>';
        }
    }
    return tmp;
}

Conclusion :


J'attend vos avis ;)

Codes Sources

A voir également

Ajouter un commentaire Commentaires
arenasaa Messages postés 11 Date d'inscription mercredi 2 septembre 2009 Statut Membre Dernière intervention 3 octobre 2021
6 nov. 2009 à 20:47
arenasaa Messages postés 11 Date d'inscription mercredi 2 septembre 2009 Statut Membre Dernière intervention 3 octobre 2021
6 nov. 2009 à 20:17
bonsoir,

j'ai trouver la soluc.....

http://www.meric-graphisme.info/articles.php?lng=fr&pg=1943

merci pour votre aide
arenas
meliubaf Messages postés 22 Date d'inscription lundi 1 octobre 2007 Statut Membre Dernière intervention 6 novembre 2009
6 nov. 2009 à 17:43
ça dépend de la hauteur de votre image, du parametre fixed mis ou non, du paramètres repeat à ne pas mettre dans votre exemple je pense etc...
arenasaa Messages postés 11 Date d'inscription mercredi 2 septembre 2009 Statut Membre Dernière intervention 3 octobre 2021
6 nov. 2009 à 11:48
ai,

se ne pas toute a fait sa......

gris degrade
arenasaa Messages postés 11 Date d'inscription mercredi 2 septembre 2009 Statut Membre Dernière intervention 3 octobre 2021
6 nov. 2009 à 11:04
bonjour,

merci pour votre aide :)

sa fonction tres bien !
arenas
Afficher les 16 commentaires

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.