Dégradé de texte

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

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.