I was asked recently if there was an easy way to create a logo for a website, where the logos background color changes. Most peoples initial reaction would be to create an animated GIF to achieve this result, but a little bit of jQuery knowledge we can create the same effect with a simple transparent PNG image over a div that has a changing background color.
The end result of what we are going to create.
The Theory:
If the image we create has transparent section sections and place it inside a div, the background color of the div will show through as part of the image. With jQuery we can change the background color and easily adjust the colors used and the transition timings.
This method could also be used as an onClick event to change the background color of a div, a possible use could be if your selling a product in a few variations of color, if you created a top layer image with transparent sections where the color come through from behind and let the user change the color of the product by clicking on a color sample to fill the background with that color.
The Code:
Firstly we need to add a div to the HTML, which we can then apply the jQuery to. In this example I am creating a div with the ID of branding that we will add to the page.
<div id="branding"> <img src="logo.png" width="400" height="400" alt="" /> </div>
Next we need to set some basic style properties for the div and in this example I am going to place it in the middle of the page with position absolute. The main thing in the CSS though is that a background color should be set initially as the first color change will not happen until the interval set elapses.
<style type="text/css">
#branding {
position: absolute;
left: 50%;
top: 50%;
margin: -200px 0 0 -200px;
width: 400px;
height:400px;
background-color: #ffffff;
}
</style>
Now that we have the image centered in the middle of the page we can start adding the jQuery that will animate the background color. I am going to load the Google jQuery library and also the jQuery UI script, which is essential to the animating the div’s background. You can leave the jQuery UI file out if you are animating the body background color.
In the jQuery itself we are going to set and interval that the process will repeat itself, in this example I have set it to 4000 milli seconds or every 4 seconds. There are also 2 variables, one holding an array of the colors to use and a random number generator that will select a number from the array each time. Being a random number generator the next color is never know and can be any color in the array, which I personally think is a cool effect but could be changed to be the current number than add 1 each interval.
Then we use the jQuery selector to get the div we set up and animate the background color to the newly selected color from the array, with a 1 second transition between the two colors, giving us a smooth and easily adjustable color changing image.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
setInterval(function() {
var theColours = Array('#ffffff','#f35c5c','#b1f35c','#5cd1f3','#835cf3');
var theColour = theColours[Math.floor(Math.random()*theColours.length)];
$('#branding').animate({backgroundColor: theColour}, 1000);
}, 4000);
});
</script>