Changing background color every X seconds in Javascript

So you are looking at ways to change background color of an HTML element, every X seconds using jQuery? I recently worked on developing a website which required toggling of main div’s background color every 4 seconds. The web page already had jQuery included to it. So I had two approaches to achieve this.

Toggling background color every X seconds without animation

This is simple. I just changed the background color of body every 2 seconds. I used document.body.style.backgroundColor inside first_color()to set the background color. I have called another function named change_color()  which set a different color to body. I looped two functions that set 2 different colors with setInterval function and used setTimeout to give a gap between one color and another color.

View Demo

Javascript Code

< script type = "text/javascript" > 
toggle_color("#61beb3", "#90a2c6", 4000, 2000);

function toggle_color(color1, color2, cycle_time, wait_time) {

    setInterval(function first_color() {
        document.body.style.backgroundColor = color1;
        setTimeout(change_color, wait_time);
    }, cycle_time);

    function change_color() {
        document.body.style.backgroundColor = color2;
    }
} < /script>

The Javascript code above will simply toggle the background color of HTML body once every 2 seconds.  The color #61beb3 will remain as background until #90a2c6 is set as background by change_color() function.

Toggling background color every X seconds with animation

The above method only changes the background color. In this approach I have used jQuery animate function to animate the background color. This makes the transition between one color and another color smoother. Click View Demo and wait for 8 seconds to see the animation.

View Demo

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
	<title>Toggling Background Color every X seconds with animation	</title>
</head>
<body>
<script type="text/javascript">
$(document).ready(function()
{

function toggle_color(color1,color2,cycle_time,wait_time) {
setInterval(function first_color() {
    $("body").animate({
        backgroundColor: color1
    }, 1000, function () {
        setTimeout(change_color, wait_time);
    });
}, cycle_time);

function change_color() {
    $("body").animate({
        backgroundColor: color2
    }, 1000, function () {
        setTimeout(function () {}, wait_time);
    });
}
}

toggle_color('#61beb3','#7d4b68',8000,3000);
});
</script>
</body>
</html>

Code Explanation

The above code uses animate function in jQuery to create the transition between base color and specified new color. The first_color() function is called every 8 seconds. It animates the background color from white to color – #61beb3. This animation takes 1 minute to run, since duration is specified as 1000 milliseconds. So you will see the background animating to the given first color from white during  seconds 8 to 9. The change_color function is called after 3 seconds. The setTimeout function is used make the changed background color stay for 3 seconds. The change_color() function repeats what exactly the first first_color() function did. But it animates to a different color and halts 3 seconds as there is a blank function call is specified in setTimeout after 3000 milliseconds.

ALSO READ  Disabling past dates in bootstrap datepicker

 

Changing random background color every X seconds with animation

View Demo

Javascript Code

<script type="text/javascript">
$(document).ready(function()
{
//Function to generate random color code
function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

function change_random_bgcolor(change_time) {
setInterval(function change_color() {
    $("body").animate({
        backgroundColor: getRandomColor()
    }, 500);
}, change_time);
}
change_random_bgcolor(1000);
});
</script>

The first 2 example explained toggling the background color between two preset colors. If you want to fill the background with random colors, use change_random_bgcolor(change_time) function to do it. As mentioned in the code snippet above,  change_color() function is called every second. The getRandomColor() returns a new color code every time.  And the animate function animates the body’s background color to the randomly generated color code. This animation runs for 500 milliseconds and the loop continues.

2 Comments

  1. exnius April 15, 2016
  2. Joesph October 12, 2016

Leave a Reply