浏览器中的动画透明图像噪声 - 凌波效应

时间:2013-09-30 22:30:00

标签: javascript jquery html css noise

我正在尝试制作动画图像噪音,类似于游戏Limbo或Left4Dead。

噪音必须具有透明度,从选项中获取.gif。

我可以使用.png精灵表创建一个div,并通过它制作动画,然后在整个网站上重复这个小div,但这听起来很昂贵。

.apng将是最佳选择,但实际上并不支持。

我能想到的唯一其他选择是使用javascript生成噪声客户端,但听起来它可能导致巨大的浏览器fps下降。

任何想法stackoverflow?

1 个答案:

答案 0 :(得分:0)

提到Limbo带回了一些美好的回忆。在我感到无聊之前几分钟把它扔在一起。不完全确定你的问题是什么,但也许它可能有一些用途,同时让你的想法如何处理这个,它可能是我想要在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();
});