05 Apr
Animating Colors with jQueryHave you ever tried to animate the color of an elements background, border or text in jQuery and it doesn’t work? For some reason jQuery has not implemented native color animations. That said, John Resig himself made a color plugin long ago that enables color animations in jQuery. Using this plugin we are now able to transition color animations. A great example of color animation can be found on David DeSandro‘s Metafizzy website.
If you haven’t noticed already, this page is using the color plugin along with a little snippet I wrote below to loop through an array of pre-defined colors and animate the body background. You can use this same technic or modify the script to suit your own needs and get a very “Metafizzy” effect going on. Check it:
jQuery(function($){
var colors = ['c74d28','c78d28','b6c728','28c758','28a0c7','3728c7','8d28c7','c728a3','c7283e','386c99','82b52a'];
animateColor(0);
function animateColor(x){
$("body").animate({"backgroundColor":"#"+colors[x],"color":"#"+colors[x]}, 10000, function(){
if(x >= colors.length){
x = 0;
} else {
x++;
}
animateColor(x);
});
}
});tags: animate / background / color / jquery / plugin / snippet
3 comments
-
Posted: Apr 12, 2011
LOL – I did the same thing on http://pro.ps -
Great minds think in the same aspects of things.
Peace dude -
-
Posted: Aug 16, 2011
Great, thanks for this I was searching high and low to try and find a way of achieving this effect.
-
Posted: Dec 13, 2011
I would like to have your background in one of my header 100% width, where also would like to have a slide show plugin in my wordpress. is this possible? Do you know where I can find this? Kim
