Animated transparent image noise in browser - Limbo Effect

Question

I'm trying to make animated image noise, similar to the game Limbo, or Left4Dead.

The noise would have to have levels of transparency, which takes .gifs out of the options.

I could make a div with a .png sprite sheet, and animate through that, then repeat this small div all over the site, but that sounds costly.

.apng would be the best choice, but that really isn't supported.

The only other option I can think of is generating the noise client side with javascript, but that sounds like it could cause huge browser fps drops.

Any ideas stackoverflow?

Answer 1

The mention of Limbo brought back a few good memories. Threw this together in a few minutes before I got bored. Not entirely sure what you were after from your question but maybe it could be of some use whilst getting your thoughts together about how to handle this, it's probably the kind of route I'd go down if i was trying to handle it in jquery.

http://jsfiddle.net/eT7kH/1/

$(document).ready(function(){

  var shades = new Array('#000000','#030303','#050505','#080808','#111111','#141414','#181818','#222222');

  function alter_noise() {
    $('.noise').css('background-color', shades[Math.floor(Math.random()*shades.length)]); // varying colour
    $('.noise').css('opacity', '0.2' + (1 + Math.floor(Math.random() * 3))); // varying opacity

    setTimeout(alter_noise, 50 + Math.floor(Math.random() * 100)); // varying update time
  }

  alter_noise();
});