Dégradé de texte

Soyez le premier à donner votre avis sur cette source.

Vue 5 993 fois - Téléchargée 284 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
Messages postés
9
Date d'inscription
mercredi 2 septembre 2009
Statut
Membre
Dernière intervention
11 juin 2014

Messages postés
9
Date d'inscription
mercredi 2 septembre 2009
Statut
Membre
Dernière intervention
11 juin 2014

bonsoir,

j'ai trouver la soluc.....

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

merci pour votre aide
arenas
Messages postés
22
Date d'inscription
lundi 1 octobre 2007
Statut
Membre
Dernière intervention
6 novembre 2009

ç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...
Messages postés
9
Date d'inscription
mercredi 2 septembre 2009
Statut
Membre
Dernière intervention
11 juin 2014

ai,

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

gris degrade
Messages postés
9
Date d'inscription
mercredi 2 septembre 2009
Statut
Membre
Dernière intervention
11 juin 2014

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.