Skip to content
September 13, 2012 / Mohamed Amged :)

Animated Colored Background

I think it’s so pretty idea could be used with the unreadable content web pages, which has no articles like media or portfolio.

so here we go with Color animation jQuery-plugin by Edwin Martin

to get the number of required DIVs to full the page

I created some DIVs according to the equation (8*7) -1

for(var i=0;i<7*8-1;i++)

I got this equation because the width I specified is 12.5% for each DIV, that means we need 8 DIVs to full the whole page (100% of the page width) by 100/12.5, and so with the height

the minus one (-1) because of the float points which by the equation will equal one DIV


the above code is to get a random default background color for the new appended DIVs

so the code will looks like


for(var i=0;i<7*8-1;i++)
$(‘<div class=”b”></div>’).appendTo(‘#gridcontainer’).css({‘background’:’#’+Math.floor(Math.random()*16777215).toString(16),’float’:’left’});

setInterval(callback, 100);
function callback(){
var animTime=3000;
for(var i=0;i<5;i++)
$($(‘.b’)[Math.round(Math.random() * ($(‘.b’).length- 0)) + 0]).animate({backgroundColor:’#’+Math.floor(Math.random()*16777215).toString(16)},animTime);



Please, Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: