Главная » Файлы » Прочие скрипты » jQuery
Эффект матрицы на фоне сайта с использованием HTML5 canvas для uCoz
07.10.14, 13:57:37



Очень крутой эффект матрицы для вашего сайта. Я слегка модифицировал скрипт, чтобы фон автоматически подстраивался под разрешение окна сайта

Для начала посмотрите ДЕМО

Моё тестирование в фидле: КЛИК

Установка:

В самый верх страницы после тега < /head > вставляйте:
Код
<canvas id="q"></canvas>
<script>
var width = q.width = $(document).width(); // Ширина матрицы
var height = q.height = $(document).height(); // Высота матрицы
var letters = Array(256).join(1).split('');

var draw = function () {
  q.getContext('2d').fillStyle = 'rgba(0,0,0,.05)'; // Цвет и непрозрачность слоёв
  q.getContext('2d').fillRect(0, 0, width, height);
  q.getContext('2d').fillStyle = '#0e0'; // Цвет текста
  letters.map(function (y_pos, index) {
  text = String.fromCharCode(65 + Math.random() * 33);
  x_pos = index * 10;
  q.getContext('2d').fillText(text, x_pos, y_pos);
  letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10;
  });
};
setInterval(draw, 33); // Скорость появления символов
</script>


Материал взят из ЭТОЙ статьи

Статья подготовлена Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: эффект, ucoz, Canvas, на, фоне, HTML5, матрицы, использованием, для, сайта
Просмотров: 1313 | Загрузок: 0 | Комментарии: 3 | Рейтинг: 1.0/5
Всего комментариев: 3
0
1 [ЦИТИРОВАТЬ]   [Материал]
умудрился засунуть в матрицу фотку, не подскажите, как ее по центру поставить?
Код
<canvas id="q"></canvas>  
  <script>  
var width = q.width = 800;
var height = q.height = 640;
var letters = Array(256).join(1).split('');
var c = q.getContext('2d');
var img = new Image();

var draw = function () {
  c.fillStyle = 'rgba(0,0,0,.05)';
  c.fillRect(0, 0, width, height);  
  img.src = 'https://pp.vk.me/c620516/v620516263/1ad7f/ZSEfjI3iAe0.jpg';
  c.globalAlpha = 0.05;
  c.drawImage(img, 0, 0);
  c.globalAlpha = 1;
  c.fillStyle = '#0e0';
  letters.map(function (y_pos, index) {
  text = String.fromCharCode(65 + Math.random() * 33);
  x_pos = index * 10;
  c.fillText(text, x_pos, y_pos);
  letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10;
  });
};
setInterval(draw, 33);
  </script>

0
2 [ЦИТИРОВАТЬ]   [Материал]
Перепробовал несколько методов - ни к чему не привело...

0
3 [ЦИТИРОВАТЬ]   [Материал]
Вот появилось чуть больше времени - погуглил и в первом же топике по запросу нашёл ответ, какие параметры есть у изображения в канвасе. В будущем тоже не ленись и гугли ответ, стараясь самостоятельно решить подобные вопросы:

http://jsfiddle.net/apoucoz/9wqczvpu/5/

Имя *:
Email: