Farbverlauf im Text 3

Ein weiteres Javascript von unserem User Mc Santa (hat das eigentlich was mit dem Weihnachtsmann zu tun? 😉 )

Im Gegensatz zu dem Farbverlauf im Text 1 und dem Farbverlauf im Text 2 gibt es hier nicht nur zwei Farben, mit dem man den Text gestalten kann, sondern es können beliebig viele Farben (z. B. aus unserer Farbtabelle) genutzt werden.

Gebt dazu einfach die gewünschten Farbcodes in dem Array farben an. Der Text, die Schriftart und die Schriftgröße kann natürlich auch wieder angepasst werden.

<!-- präsentiert von kostenlose-javascripts.de --> <script type='text/javascript'> <!-- // zu ändern: //========================================================================== // wähle einen Text, // Farben (so viele du willst, einfach ergänzen) // sowie eine Größe // und eine Schriftart //========================================================================== var text = 'Dieser Text wechselt seine Farbe, ganz wie es dir beliebt.'; var farben = new Array('#ff0000', '#0000ff', '#ff0000', '#00ff00'); var size = '25'; var family = 'Comic Sans MS' //========================================================================== // auch zu ändern?? // einiges kann man bestimmt sinnvoller schreiben^^ var hex1, hex2, decnum, hexnum; var SR, SG, SB, ER, EG, EB, MR, MG, MB, DR, DG, DB; //StartRed, StartGreen, ..., EndRed, ..., MiddleRed, ..., DistanceRed, ..., var NSR, NSG, NSB, NER, NEG, NEB, k, v, w; var ll = new Array /* // ============================== // // ////////Farbenwechsler//////// // // ============================== // // /////////VERSION 2.1.0//////// // // ////////////////////////////// // // //////Mi, der 14-11-2007////// // // /////////////(dd-mm-yyyy)///// // // ////////////////////////////// // // ////////////////////////////// // // Greetz Santa // // ============================== // // ////////////////////////////// // // verändert an dem Programm was/ // // ihr wollt, aber wundert euch// // // dann nicht wenn irgendwas nich // // funzt. :P ansonsten Viel Spaß/ // // ////////////////////////////// // // ============================== // */ function transHex(hexchar) { // der mist hatte mit switch nicht funktioniert -.- if (hexchar == 'a' || hexchar == 'A') return 10; else if (hexchar == 'b' || hexchar == 'B') return 11; else if (hexchar == 'c' || hexchar == 'C') return 12; else if (hexchar == 'd' || hexchar == 'D') return 13; else if (hexchar == 'e' || hexchar == 'E') return 14; else if (hexchar == 'f' || hexchar == 'F') return 15; else return 0; } function transNum(numchar) { // also hab ich das hier auch gar nicht erst versucht^^ if (0 <= numchar && numchar <= 9) return String(numchar); //<< hatte nicht funktioniert, weil ich die nummer als string brauche. else if (numchar == 10) return 'A'; else if (numchar == 11) return 'B'; else if (numchar == 12) return 'C'; else if (numchar == 13) return 'D'; else if (numchar == 14) return 'E'; else if (numchar == 15) return 'F'; else return 0; } function getHex(num) { num = parseInt(num) hexchar1 = parseInt(num/16); hexnum = transNum(hexchar1); hexchar2 = num%16; hexnum = hexnum + transNum(hexchar2); return hexnum; } function getNum(hex) { hex1 = parseInt(hex.substring(0, 1)); hex2 = parseInt(hex.substring(1, 2)); if (!isNaN(hex1)) decnum = hex1*16; //wenn es eine zahl ist, ist es einfach else decnum = (parseInt(transHex(hex.substring(0, 1)))*16); //ansonsten muss der buchstabe in eine zahl umgewandelt werden if (!isNaN(hex2)) decnum += hex2; // hier das gleiche else decnum += (transHex(hex.substring(1, 2))); return decnum; } // ab hier wird es verwirrend... // hab ewig gebraucht für den mist, weil was macht man, // der text nicht unter den farbe gleichmäßig // aufzuteilen geht? // text abschneiden? xD (hab ich natürlich nicht gemacht ;) k = 0; b = text.length % (farben.length-1); SR = getNum(farben[k].substring(1,3)); SG = getNum(farben[k].substring(3,5)); SB = getNum(farben[k].substring(5,7)); ER = getNum(farben[(k+1)].substring(1,3)); EG = getNum(farben[(k+1)].substring(3,5)); EB = getNum(farben[(k+1)].substring(5,7)); x = 0; if (k < b) { l = (parseInt(text.length/(farben.length-1))+1); x++; } else l = parseInt(text.length/(farben.length-1)); for (a = 0; a < farben.length-1; a++) { l[a] = parseInt(text.length/(farben.length-1)); if (text.lenght % (farben.length-1) > a) l[a]++; } //schritt zur jeweils nächsten farbe NSR = (SR-ER)/(l-1); NSG = (SG-EG)/(l-1); NSB = (SB-EB)/(l-1); v = 0; w = 0; l_small = parseInt(text.length/(farben.length-1)); for (i = 0; i < text.length; i++) { if (i == ((l_small*(k+1))+x)) { k++; if (k < b) { l = (parseInt(text.length/(farben.length-1))+1); x++; } else { l = parseInt(text.length/(farben.length-1)); } w=v; SR = getNum(farben[k].substring(1,3)); SG = getNum(farben[k].substring(3,5)); SB = getNum(farben[k].substring(5,7)); ER = getNum(farben[k+1].substring(1,3)); EG = getNum(farben[k+1].substring(3,5)); EB = getNum(farben[k+1].substring(5,7)); NSR = (SR-ER)/(l-1); NSG = (SG-EG)/(l-1); NSB = (SB-EB)/(l-1); } //farbe ausrechnen; noch dezimal DR = SR - parseInt(NSR*(i-w)); DG = SG - parseInt(NSG*(i-w)); DB = SB - parseInt(NSB*(i-w)); //in hexadezimal konvertieren MR = getHex(DR); MG = getHex(DG); MB = getHex(DB); v++; document.write ('<span style="font-size:' + size + 'px; font-family: ' + family + '; color: #' + MR + MG + MB + ';">' + text.substring (i,i+1) + '</span>'); //css by cordius } //--> </script> <br /> JavaScript von <a href="http://www.kostenlose-javascripts.de/javascripts/texteffekte/farbverlauf-im-text-3/" target="_blank">kostenlose-javascripts.de</a> <br /> <!-- präsentiert von kostenlose-javascripts.de -->