Colour transition JavaScript

Question

I've noticed a site that seems to have a very nice colour transition effect on the background. When a link is pressed the background changes colour, however it doesn't seem instant. A transition seems to take place..

http://fuelbrandinc.com/#/about

I was wondering if anyone had any idea how to replicate this functionality?

Thanks,

Answer 1

They're using jQuery JavaScript library and the jQuery Color animations plugin.

You can see this by inspecting the compiled.js file from source line 202 onwards via your favourite DOM inspection tool.

Answer 2

When you described the effect, I was picturing something horrible, but it actually didn't look that bad at all.

You can use the setInterval or setTimeout to make code execute at specific intervals. Example:

var cnt = 0;
var handle = window.setInterval(function(){
  $('body').css('backgroundColor', '#'+'0123456789ABCDEF'[cnt++]+'00');
  if (cnt == 16) window.clearInterval(handle);
}, 100);