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

.css({‘background’:’#’+Math.floor(Math.random()*16777215).toString(16),’float’:’left’});

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

so the code will looks like

Code

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

$(‘.b’).css({“width”:”12.5%”,’height’:’14.3%’})
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);
};

Demo

Advertisements

Please, Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: