Attempt 1 - solids

by mynameisdonald

HTML

<div id="group">
    <div class="sub red">   
    </div><!--sub-->
    <div class="sub pink">   
    </div><!--sub-->
    <div class="sub purple">   
    </div><!--sub-->
    <div class="sub blue">   
    </div><!--sub-->
    <div class="sub lblue">   
    </div><!--sub-->
    <div class="sub green">   
    </div><!--sub-->
    <div class="sub yellow">   
    </div><!--sub-->
    <div class="sub orange">
    </div><!--sub-->
    <div class="sub red">
    </div><!--sub-->
</div><!--group-->

CSS

body{
    background:#333;
}
#group{
    position:relative;
    float:left;
    width:900px;
   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() * 50)) + ',' + (Math.floor(Math.random() * 42)) + ')';
        $(e).css('background', col);
    });

$('.pink .pxl').each(function(i, e) {
        col = 'rgb(245,' + (Math.floor(Math.random() * 50)) + ', 92)';
        $(e).css('background', col);
    });

$('.purple .pxl').each(function(i, e) {
        col = 'rgb(184,' + (Math.floor(Math.random() * 50)) + ', 213)';
        $(e).css('background', col);
    });

$('.blue .pxl').each(function(i, e) {
        col = 'rgb(54,' + (Math.floor(Math.random() * 148)) + ', 156)';
        $(e).css('background', col);
    });

$('.lblue .pxl').each(function(i, e) {
        col = 'rgb(76,' + (Math.floor(Math.random() * 129)) + ',183)';
        $(e).css('background', col);
    });

$('.green .pxl').each(function(i, e) {
        col = 'rgb(86,' + (Math.floor(Math.random() * 189) + 50) + ', 58)';
        $(e).css('background', col);
    });

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

    $('.yellow .pxl').each(function(i, e) {
        col = 'rgb(195,' + (Math.floor(Math.random() * 0)+150) + ',' + (Math.floor(Math.random() * 0) + 57) + ')';
        $(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);