브라우저의 애니메이션 투명 이미지 노이즈 - 림보 효과

Question

림보 게임 또는 Left4Dead와 비슷한 애니메이션 이미지 노이즈를 만들어 내려고합니다.

노이즈는 투명도 수준을 가져야합니다. 투명도는 옵션에서 .gif를 가져옵니다.

.png 스프라이트 시트로 div를 만들고 그 위에 애니메이션을 적용한 다음이 작은 div를 사이트 전체에서 반복 할 수 있지만 비용이 많이 드는 것처럼 들립니다.

.apng이 최선의 선택이지만 실제로 지원되지는 않습니다.

내가 생각할 수있는 유일한 다른 옵션은 자바 클라이언트로 노이즈 클라이언트 측을 생성하는 것입니다.하지만 거대한 브라우저 fps가 떨어질 수있는 것처럼 들립니다.

모든 아이디어 stackoverflow?

Answer 1

림보에 대한 언급은 몇 가지 좋은 추억을 가져 왔습니다. 내가 지루해지기 전에 몇 분 안에 이걸 던져 버려. 당신이 당신의 질문 이후에 있었는지는 확실하지 않지만 아마 이것을 처리하는 방법에 관해 당신의 생각을 모으는 동안 사용법이 될 수도 있습니다. jquery에서 처리하려고한다면 아마도 내려갈 것입니다. 당신이 당신의 CP를 죽이고 싶어하는 경우

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(); 
});