[ACCEPTED]-How to make background gradually change colors?-background-color
You can use CSS transitions to get that 6 effect. Just add that css code into the 5 element that is changed from js:
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
With that 4 on css each time any style value is being 3 changed that change is animated from current 2 to new value by 1s.
It works only on modern 1 browsers. See an example: click
Here is an example on how to animate the 4 body tag background :
function animateBg(i) {
document.body.style.backgroundColor = 'hsl(' + i + ', 100%, 50%)';
setTimeout(function() {
animateBg(++i)
}, i);
}
animateBg(0);
Keep in mind that hsl 3 isn't crossbrowser, you can also do the 2 trick with hex/rgb colors.
Jsfiddle link 1 : http://jsfiddle.net/euthg/
You might want to use the setTimeout() function:
function animateBg()
{
myElement.style.backgroundColor = someNewValue;
setTimeout(animateBg, 20); // 20 milliseconds
}
and 1 invoke animateBg() in your body's onload handler. E.g., <body onload="animateBg()">.
I would try using a JQuery color plugin. Look at the examples 2 here (click on Demo), they seem to do exactly 1 what you describe.
More Related questions
We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.