Анимированные прозрачные изображения шума в браузере - Limbo Effect

Question

Анимированные прозрачные изображения шума в браузере - Limbo Effect

0

Я пытаюсь сделать анимированный шум изображения, похожий на игру Limbo или Left4Dead.

Шум должен обладать уровнями прозрачности, которые берут.gifs из опций.

Я мог бы сделать div с листом спрайта.png и оживить его, а затем повторить этот маленький div по всему сайту, но это звучит дорого.

.apng будет лучшим выбором, но это действительно не поддерживается.

Единственный вариант, о котором я могу думать, это создание шумовой клиентской стороны с javascript, но похоже, что это может привести к огромным падениям кадров в браузере.

Любые идеи stackoverflow?

user1855596 01 окт. 2013, в 00:50

Источник

0

Если вы хотите убить свой CP, я создал что-то очень приятное: jsfiddle.net/6733f/3/embedded/result
Roko C. Buljan 01 окт. 2013, в 00:52

Теги:

javascript

jquery

html

css

noise

1 ответ

Ещё вопросы

Если вы хотите убить свой CP, я создал что-то очень приятное: jsfiddle.net/6733f/3/embedded/result

MLeFevre · Accepted Answer · 2013-09-30T20-23-00.000Z

Упоминание о Лимбо принесло несколько хороших воспоминаний. Бросил это вместе за несколько минут, прежде чем мне стало скучно. Не совсем уверен, что вы были после вашего вопроса, но, возможно, это может быть полезно, когда вы вместе думаете о том, как с этим справиться, это, вероятно, такой маршрут, который я бы спустил, если бы пытался обработать его в 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();
});