Is there a method to randomly select hex codes for specific colors?
I want to replicate the design in this image through coding.
Image
Here is the code I have so far:
HTML
<div id="group">
<div class="sub red panel">
</div><!--sub-->
<div class="sub orange">
</div><!--sub-->
<div class="sub yellow">
</div><!--sub-->
CSS
body{
background:#333;
}
#group{
position:relative;
float:left;
width:500px;
height:300px;
}
.sub{position:relative; float:left; width:96px;}
.pxl{width:7px; position:relative;float:left; height:7px; margin:1px 1px 0 0;}
.red div{background:#f00;}
.orange div{background:#f26607;}
.yellow div{background:#f5e70b;}
js
var pageLimit=288;
for(var i = 1; i <= pageLimit; i++) {
$('.sub').append('<div class="pxl"></div>' )
}
var randint = function ( ceiling ) {
return Math.floor( Math.random() * ceiling );
};
setTimeout(function () {
$( '.pxl' ).each(function () {
$( this ).delay( randint(5000) ).fadeTo( randint(10000), 0 );
});
}, 5000 );
If you can offer any assistance, it would be greatly appreciated. jsFiddle