CODEWITHSUNDEEP
javascriptcsscss-transitions
Lee
Lee

Reputation: 5936

Colour transition JavaScript

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,

Upvotes: 0

Views: 865

Answers (2)

Russ Cam
Russ Cam

Reputation: 125538

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.

Upvotes: 1

Guffa
Guffa

Reputation: 700880

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);

Upvotes: 1

Related Questions