Attempt 1 - solids

by mynameisdonald

HTML

<div id="group">
    <div class="sub red">
        
    </div><!--sub-->
    <div class="sub orange">
        
    </div><!--sub-->
    <div class="sub yellow">
        
    </div><!--sub-->
</div><!--group-->

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;}
.panel {
    background-color: #DE4C76;
    background-image: -webkit-gradient(linear, 25% 0%, 0% 0%, from(rgb(238, 104, 9)), to(rgb(253, 1, 0)));
    background-image: -moz-linear-gradient(center right, rgb(238, 104, 9)45%, rgb(253, 1, 0) 60%);
}

JavaScript

var pageLimit = 288;

for (var i = 1; i <= pageLimit; i++) {
    $('.sub').append('<div class="pxl"></div>')
}

$(function() {
    $('.red .pxl').each(function(i, e) {
        col = 'rgb(255,' + (Math.floor(Math.random() * 150)) + ',' + (Math.floor(Math.random() * 150)) + ')';
        $(e).css('background', col);
    });

    $('.orange .pxl').each(function(i, e) {
        col = 'rgb(242,' + (Math.floor(Math.random() * 100) + 102) + ',' + (Math.floor(Math.random() * 100) + 7) + ')';
        $(e).css('background', col);
    });

    $('.yellow .pxl').each(function(i, e) {
        col = 'rgb(245,' + (Math.floor(Math.random() * 20) + 231) + ',' + (Math.floor(Math.random() * 100) + 11) + ')';
        $(e).css('background', col);
    });
});

var randint = function(ceiling) {
    return Math.floor(Math.random() * ceiling);
};

setTimeout(function() {
    var col = '';


    $('.pxl').each(function() {
        $(this).delay(randint(5000)).fadeTo(randint(10000), 0);
    });
}, 5000);