Показать сообщение отдельно
  #4 (permalink)  
Старый 28.12.2014, 13:39
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

Вот, сделал небольшой пример с использованием одного бесшовного *png изображения:

http://learn.javascript.ru/play/4qNur

<!DOCTYPE HTML>
<html>
  
  <head>
    <style type="text/css">
      .noise {
        background: url('http://learn.javascript.ru/files/play/54/9f/549fdabb5db7c.png');
        height: 480px;
        width: 640px;
      }
    </style>
  </head>
  
  <body>
    <div class="noise"></div>
    
    <script type="text/javascript">
      (function() {
        var getRandom = function(max) {
        		return Math.floor(Math.random() * ++max);
        	},
          	noise = document.querySelector('.noise'),
            noiseStyle = noise.style;
        setInterval(function() {
        	noiseStyle.backgroundPosition = getRandom(200) + 'px ' + getRandom(200) + 'px'; 
        }, 30);
      })();
    </script>
  </body>

</html>


В данном примере меняется стиль background-position со случайными значениям от 0 до 200 (т.к. размер текстуры 200x200). Частоту кадров можно изменить с помощью второго аргумента setInterval.

Вроде вполне хорошо смотрится, и вес текстуры всего 5кб.

Последний раз редактировалось ruslan_mart, 28.12.2014 в 13:44.
Ответить с цитированием