Color Transition Example1

1.js


r1=255;
g1=0;
b1=0;
c1=1;
function f1()
{
    if(c1==1)
    {
        if(g1<255)
        {
            g1++;
            b1++;
        }
        else
            c1=2;
    }
    else
    {
        g1--;
        b1--;
        if(g1==0)
        {
            c1=1;
        }
    }
    document.getElementById('t1').style.color='rgb('+r1+','+g1+','+b1+')';
}

r2=0;
g2=255;
b2=0;
c2=1;
function f2()
{
    if(c2==1)
    {
        if(r2<255)
        {
            r2++;
            b2++;
        }
        else
            c2=2;
    }
    else
    {
        r2--;
        b2--;
        if(r2==0)
        {
            c2=1;
        }
    }
    document.getElementById('t2').style.color='rgb('+r2+','+g2+','+b2+')';
}

r3=0;
g3=0;
b3=255;
c3=1;
function f3()
{
    if(c3==1)
    {
        if(r3<255)
        {
            r3++;
            g3++;
        }
        else
            c3=2;
    }
    else
    {
        r3--;
        g3--;
        if(r3==0)
        {
            c3=1;
        }
    }
    document.getElementById('t3').style.color='rgb('+r3+','+g3+','+b3+')';
}

r4=255;
g4=255;
b4=0;
c4=1;
function f4()
{
    if(c4==1)
    {
        if(b4<255)
        {
            b4++;
        }
        else
            c4=2;
    }
    else
    {
        b4--;
        if(b4==0)
        {
            c4=1;
        }
    }
    document.getElementById('t4').style.color='rgb('+r4+','+g4+','+b4+')';
}

function f6()
{
    setInterval('f1();', 11);
    setInterval('f2();', 9);
    setInterval('f3();', 7);
    setInterval('f4();', 5);
}

1.html


<html>
<head>
    <script type="text/javascript" src="1.js"></script>
</head>
<body onload="f6();">
<center>
<span id='div1' style="font-size:50">
    <b id='t1'>abcd</b>
    <b id='t2'>abcd</b>
    <b id='t3'>abcd</b>
    <b id='t4'>abcd</b>
</span>
</center>
</body>
</html>

Save these two files with their given name and open the HTML file to understand how COLOR TRANSITION works or check the DEMO.

Important parameters to set up a  COLOR TRANSITION SCHEME are-

1. Starting Color

2. End Color

3. Time Interval of Color Change

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s