Attempt 1

by mynameisdonald

HTML

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

CSS

#group{
    position:relative;
    float:left;
    width:500px;
    height:300px;
}
.sub{position:relative; float:left; width:88px;}

.pxl{width:7px; position:relative;float:left; height:7px; margin:1px 1px 0 0; opacity:0;}
.red div{background:#fff;}
.orange div{background:#f26607;}
.yellow div{background:#f5e70b;}
.panel {
    background-color: #DE4C76;
    background-image: -webkit-gradient(linear, 25% 0%, 0% 0%, from(rgb(216, 59, 101)), to(rgb(229, 93, 105)));
    background-image: -moz-linear-gradient(center right, rgb(216, 59, 101) 25%, rgb(229, 93, 105) 80%);
}

JavaScript

var pageLimit=286;

 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), 1 );
    });
}, 5000 );