It’s a Rainbow! – Color Changing Text and Backgrounds w/ jQuery
Here’s a quick and easy way to cycle between multiple colors smoothly.
Normally you would define the (background) color in the CSS and that would be the end of it. In this case we want to be able to adjust colors after the page has loaded, and not just once either – we’re aiming for continuous adjustments.
The lovely part about this whole thing is the small about of jQuery required to make it all happen.
What You Will Learn
- How to generate a random RGB color value.
- The process of animating/looping color changes via the jQuery Color Animations Plugin.
- Some possible uses for continuous color swapping with backgrounds, texts, and images.
Generating Random Color Values
This is an important first step as it provides an endless supply of color values to transition to/from with a single line of jQuery.
var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
This line makes a variable called hue that contains an RGB formatted color value that will be processed by the color animations plugin in later steps.
Transitioning Between Colors
Take the time to download the jQuery Color Animations Plugin – this will be responsible for the transitions between the colors we will be randomly generating.
After you have decided what will be changing color, we will make use of the color animation plugin. I have included ‘#div’ as a placeholder for your own element/feel free to adjust the timer to your needs.
$('#div').animate( { backgroundColor: hue }, 1000);
Completed jQuery
Now that we have a means of creating random colors and transitioning between them, let’s put it together in a function so we can loop it. We’ll call it spectrum(), it will be called initially when the page loads and then again from within the function.
This is what your final jQuery should look like:
$(document).ready(function() {
spectrum();
function spectrum(){
var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
$('#div').animate( { backgroundColor: hue }, 1000);
spectrum();
}
});
At this point you now are the proud creator of an ever-changing-color background, congratulations!
Possible Uses
Changing Background Color
While we did this in the above example, you could think about limiting the colors displayed to a certain shade (ie. blues, reds, etc.) by playing around with the ranges of the numbers generated for the hue variable.
If you wanted to change the background color of the body, the animation line would look like this:
$('body').animate( { backgroundColor: hue }, 1000);
Changing Text Color
This goes pretty much along the same lines as the background color blurb above, with a few minor changes.
If you wanted to change the text color of something with the class .colored, the animation line would look like this:
$('.colored').animate( { color: hue }, 1000);
Changing Image Color with PNG Frame
This is the route that I chose to go in the live demo.
Basically, I took a solid black PNG image and carved out the parts where I wanted the background to peek through. Then I applied the color animations to the background of the element containing this PNG frame. As a result the image appears to be changing color, pretty nifty right?
I would encourage you to download the files and have a look at the exact setup for further clarification.
