text gradient

[mattover-matter]

I am trying to script on my own for once, so please don't post some url or something. I am trying to create a text-gradient script that puts a gradient throw some text.

like

document.write(gradient('this will look cool!', 'ffffff', '000000', 'ff0000'))

then it would look like:
this will l


well, you get the point. Is there like

function gradient('text' ,'a', 'b', 'c'){
for(i=0;i<text.length;i++;){
var half = text.length/2
//some math
}
}

Where would I begin?

[redhead]

well... you dont want a complete script... so take a look at this tutorial, loosely related to what you are looking for:

http://javascriptkit.com/javatutors/string2.shtml

its about going through strings one letter (or whatever) at a time... so using the fontcolor(color) method that is stated there you can hopefully work something out... :thumbsup:

[mattover-matter]

you dont want a complete script


I don't?

Well, anyway thanks for the tutorial. I will return (maybe) later to show u what I've got and maybe you can help me kink out the errors.

[redhead]

Originally posted by mattover-matter
I don't?yeah, you dontI am trying to script on my own for once..heh, although if you change your mind and want one just say and i'll post it up...

[beetle]

What browser compatibility are you wanting?

[mattover-matter]

oh, ic. I thought u meant it like "what you are looking for, is not a complete script" rather than "you don't want a complete script, so instead of giving you code...I will give u this tutorial"

I tried using the color. But, how do I make some math to make it change color between the two set colors? I mean, like how can i convert it to something that repeats. an array or something.

re: browser compatability

of course, I would want it to work with everything possible :rolleyes:

[redhead]

well, with that for loop, theres maths going on there. i dont know enough about javascript to know how to increment the colours, but this is what i came up with... although im not too sure how you'd go about making the colours on the fly, but i've written them in for now, could be changed<script>
var message="My fading text!!";
var format=message; // can add additional formatting here
var size=1;
/* this is the the bit that i dont know how
to make on the fly... */
var colour = new Array('#FFFFFF','#EEEEEE','#DDDDDD','#CCCCCC','#BBBBBB','#AAAAAA','#999999','#888888','#777777','#66 6666','#555555','#444444','#333333','#222222','#111111','#000000');// this is from white to black...
//go through the message, letter by letter
for (i=0;i<message.length;i++){
if (colour[i]) document.write(format.charAt(i).fontcolor(colour[i]).bold());
else document.write(format.charAt(i).fontcolor('#000000').bold());
}
</script>does that make sense?

[eggman]

function gradientArray(sColor,eColor,steps)
{
function getColorValue(colorValue,index)
{
return hex.indexOf(colorValue.charAt(index))*16+hex.indexOf(colorValue.charAt(index+1))
}
var hex="0123456789abcdef"
var colorArray=[]
var colorValue=[]
var colorChange=[]
for(var i=j=0;i<3;i++)
{
j=i*2+1
colorValue[i]=getColorValue(sColor,j)
colorChange[i]=(getColorValue(eColor,j)-colorValue[i])/(steps-1)
}
for(var i=0;i<steps-1;i++)
{
colorArray[i]="#"
for(var j=0;j<3;j++)
{
colorArray[i]+=hex.charAt(colorValue[j]/16)+hex.charAt(colorValue[j]%16)
colorValue[j]+=colorChange[j]
}
}
colorArray[steps-1]=eColor
return colorArray
}

sColor is the starting color.
eColor is the ending color.
steps is the number of elements the resultant array will have.
Colors must be in #RRGGBB format.

Example:

var colors=gradientArray("#000000","#ffffff",16)

[mattover-matter]

so, to use this like:

document.write(gradientarray(ff0000, 0000ff, 16)"blah")

or something like that?

[eggman]

???

var colour=gradientArray("#ffffff","#000000",16)

is equivalent to

var colour = new Array('#FFFFFF','#EEEEEE','#DDDDDD','#CCCCCC','#BB
BBBB','#AAAAAA','#999999','#888888','#777777','#66
6666','#555555','#444444','#333333','#222222','#11
1111','#000000');// this is from white to black...

and will produce the same array.

gradientArray produces an array of colors grading from the start color to end color. I thought that's what you currently needed.