Jump to content

Problem While Animating Colors In Pure JavaScript..


Eyad Syria-lover

Recommended Posts

Hello There.

I'am Making What It Seems Like A Function To Animate The Background Color Of An Element,But I Have A Problem.

This Is The Code:

 

<script>

function color(id,duration,r_start,g_start,b_start,r_end,g_end,b_end)

{

var element=document.getElementById(id);

 

var parameter=setInterval(colorGradually,50*duration);

 

function colorGradually()

{

if (r_start==r_end && g_start==g_end && b_start==b_end)

{

clearInterval(parameter);

}

else

{

for (var i=r_start,var j=g_start,var k=b_start;

i<r_end && j<g_end && k<b_end;i++,j++,k++)

{

element.style.backgroundColor="rgb("+i+","+j+","+k+")";

}

}

 

}

 

 

}

</script>

<div id="test" style="width:100%;height:200px;background-color:rgb(128,128,128)"></div>

<input type="button" onclick="color('test',1,128,128,128,255,255,255)" value="Change">

 

The Script Isn't Working At All.

I've Checked The Script With Esprisma Code Validator And The Code Was Syntactically Valid,But I Can't Recognize The Problem...

Link to comment
Share on other sites

Multiple vars are done

 

var i = r_start, j = g_start, k = b_start;

 

You do not require for loop, as the setInterval() is the loop to create a gradual colour change.

 

Problems with for loop

if 'i' for example, but the same happens to all, equals 128 right! i++ will increment to 128 + 128, meaning 2nd loop 'i' will equal 256, NOT much of a gradual change in background colour there?

 

If you want it to increment by 1 you would have to use code similar to i = i + 1; in that case, no for loop is required just

 

i = i + 1; j = j + 1; k = k + 1;

 

preceding

 

element.style.backgroundColor = "rgb(" + i + "," + j + "," + k + ")";

 

with var listing for these variables outside within the color() function instead.

Link to comment
Share on other sites

Scratch that! Better solution as the if condition won't activate clearInterval() as 'r_start', 'g_start', 'b_start' remain the same value (so it will run continuously even though rgb() will stop incrementing when rgb(255,255,255) is reached, its still looping), in the else condition all you need is

r_start = r_start + 1;
g_start = g_start + 1;
b_start = b_start + 1;
var i = r_start, j = g_start, k = b_start;
element.style.backgroundColor = "rgb(" + i + "," + j + "," + k + ")";

or remove var i, j, and k completly from background styling, and use 'r_start', 'g_start', 'b_start' instead

Edited by dsonesuk
  • Like 1
Link to comment
Share on other sites

Scratch that! Better solution as the if condition won't activate clearInterval() as 'r_start', 'g_start', 'b_start' remain the same value (so it will run continuously even though rgb() will stop incrementing when rgb(255,255,255) is reached, its still looping), in the else condition all you need is

r_start = r_start + 1;
g_start = g_start + 1;
b_start = b_start + 1;
var i = r_start, j = g_start, k = b_start;
element.style.backgroundColor = "rgb(" + i + "," + j + "," + k + ")";

or remove var i, j, and k completly from background styling, and use 'r_start', 'g_start', 'b_start' instead

 

In Fact I'am Kind Of Lost.

Can You Provide Me With A Code Sir?...

I Mean A Modified Copy Of My Code...

Edited by Eyad Syria-lover
Link to comment
Share on other sites


<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />

<title>Document Title</title>

 

<script type="text/javascript">

function color(id, duration, r_start, g_start, b_start, r_end, g_end, b_end)

{

var element = document.getElementById(id);

var i = r_start, j = g_start, k = b_start;

element.innerHTML = '<h1 style="font-size:4.1vw">wait....wait...</h1>';

var parameter = setInterval(colorGradually, 50 * duration);

function colorGradually()

{

 

/// With original code! This if condition will never be true and never run clearInterval() , because the original variable values (*_start) never change anywhere in your remaing code? but! i, j, k do change

if (i === r_end && j === g_end && k === b_end)

{

clearInterval(parameter);

element.innerHTML = '<h1 style="font-size:4.1vw">The End</h1>';

}

else

{

// for (var i = r_start, j = g_start, k = b_start; i < r_end && j < g_end && k < b_end; i = i + 1, j = j + 1, k = k + 1)

// {

i = inc_dec_depending_start_and_end(r_start, r_end, i);

 

 

if (i === r_end) // comment OUT to change rgb value together

{

j = inc_dec_depending_start_and_end(g_start, g_end, j);

}// comment OUT to change rgb value together

 

if (j === g_end)// comment OUT to change rgb value together

{

k = inc_dec_depending_start_and_end(b_start, b_end, k);

}// comment OUT to change rgb value together

 

element.style.backgroundColor = "rgb(" + i + "," + j + "," + k + ")";

// }

}

 

}

function inc_dec_depending_start_and_end(start, end, value) {

if (start < end && value < end)

{

 

value += 1;

}

else if (start > end && value > end)

{

value -= 1;

}

else

{

value = end;

}

return value;

}

 

}

</script>

<style type="text/css">

 

</style>

</head>

<body>

<div id="test" style="border: 1px solid red;width:100%;height:200px;background-color:rgb(125,255,0)"></div>

<input type="button" onclick="color('test', 1, 125, 255, 0, 65, 0, 255)" value="Change">

</body>

</html>

Link to comment
Share on other sites

 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
        <title>Document Title</title>

        <script type="text/javascript">
            function color(id, duration, r_start, g_start, b_start, r_end, g_end, b_end)
            {
                var element = document.getElementById(id);
                var i = r_start, j = g_start, k = b_start;
                element.innerHTML = '<h1 style="font-size:4.1vw">wait....wait...</h1>';
                var parameter = setInterval(colorGradually, 50 * duration);
                function colorGradually()
                {

                    /// With original code! This if condition will never be true and never run clearInterval() , because the original variable values (*_start) never change anywhere  in your remaing code? but!  i, j, k do change
                    if (i === r_end && j === g_end && k === b_end)
                    {
                        clearInterval(parameter);
                        element.innerHTML = '<h1 style="font-size:4.1vw">The End</h1>';
                    }
                    else
                    {
                        // for (var i = r_start, j = g_start, k = b_start; i < r_end && j < g_end && k < b_end; i = i + 1, j = j + 1, k = k + 1)
                        // {
                        i = inc_dec_depending_start_and_end(r_start, r_end, i);


                        if (i === r_end) // comment OUT to change rgb value together
                        {
                            j = inc_dec_depending_start_and_end(g_start, g_end, j);
                        }// comment OUT to change rgb value together

                        if (j === g_end)// comment OUT to change rgb value together
                        {
                            k = inc_dec_depending_start_and_end(b_start, b_end, k);
                        }// comment OUT to change rgb value together

                        element.style.backgroundColor = "rgb(" + i + "," + j + "," + k + ")";
                        // }
                    }

                }
                function inc_dec_depending_start_and_end(start, end, value) {
                    if (start < end && value < end)
                    {

                        value += 1;
                    }
                    else if (start > end && value > end)
                    {
                        value -= 1;
                    }
                    else
                    {
                        value = end;
                    }
                    return value;
                }

            }
        </script>
        <style type="text/css">

        </style>
    </head>
    <body>
        <div id="test" style="border: 1px solid red;width:100%;height:200px;background-color:rgb(125,255,0)"></div>
        <input type="button" onclick="color('test', 1, 125, 255, 0, 65, 0, 255)" value="Change">
    </body>
</html>

 

Thank You Very Much Sir...That Worked Just As Expected...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...