Анимация фона

Посмотрим на два способа сделать фон с анимацией:

Оглавление:
  1. Фон Canvas
  2. Фон WebGL
  3. Фон SVG
  4. Заключение
  1. Использовать спрайты CSS или js
  2. Хаки с помощью .toDataURL()

Первый способ хорошо работает, если у вас есть заранее готовое изображение. Но есть способ сделать фон с анимацией с помощью HTML5 canvas. Вот как использовать метод .toDataURL() canvas что подключить фон для генерируемого URL:

while(1) {
var url = canvas.toDataURL('image/jpeg');
el.style.background = 'url(' + url + ')';
}

Но это не всё, есть две проблемы:

  1. data для адреса добавит вес, примерно на 33% для конечного изображения.
  2. Много скриптов DOM.

Оба эти метода, неэффективны и не подходят, для плавного изменения изображения 60 кадров в секунду.

Фон Canvas

Демо

Использование canvas для фона
Анимации canvas для фона

Существует не стандартный API, который работает уже несколько лет в WebKit, он может вызвать canvas как источник для фона.

Так в чем разница? А вот в чём, вместо то го что бы указывать URL для фона в стилях таким способом:

.bg {
  background: url(bg.png) no-repeat 50% 50%;
}

можно использовать -webkit-canvas(), ссылаясь на идентификатор строки контекста canvas , вот так:

.canvas-bg {
  background: -webkit-canvas(animation) no-repeat 50% 50%;
}

Дальше, нам нужно создать 2d контекст специальную версию .getContext(), создаём:

var ctx = document.getCSSCanvasContext('2d', 'animation', 300, 300);

этот метод для объекта документа, а не для canvas. Второй аргумент — это имя, используемое в -webkit-canvas().

Дальше комментирую слова Dave Hyatt:

Существует только один CSS canvas для данного глобального идентификатора в документе. Когда вы получаете контекст рисунка, необходимо также указать его размер. Canvas не будет очищен, пока вы не укажите тот же размер. Указав новый размер эквивалентен поведению которое вы ожидаете, если вы изменяете размер элементов canvas, тогда буфер canvas очищается.

Все объекты, соблюдают CSS canvas с аналогичным названием обмена, что и canvas. Это похоже, на то как работают анимационные GIF-файлы, вы можете сделать анимацию с ними синхронно для всех canvas. Изменения рисунка будут переименованы автоматически.

В демонстрации видно, что мы можем использовать requestAnimationFrame() для управления анимацией. Это здорово, потому что, когда всё подключено, связь между CSS и элементами canvas сохраняется. Не нужно возиться с DOM.

Аппаратное ускорение анимации теперь полностью работает (по крайней мере в браузерах). Остаётся только повторить, не нужно использовать JS.

к меню ↑

Фон WebGL

WebGL является лишь 3d контекст для canvas. Просто замените 2d на experimental-webgl.

var gl = document.getCSSCanvasContext('experimental-webgl', 'animation', 300, 150);

Вот концепция, которая содержит div с фоном, созданный с помощью vertext и пиксельных шейдеров.

Демо

к меню ↑

Фон SVG

Демо

Демонстрация использует фильтр SVG как градиент в качестве фона для страницы HTML.

к меню ↑

Заключение

Стоит отметить, что у Мозила уже давно есть элемент -moz-element() ( MDN ). Это часть CSS, изображения и заменены содержания 4-го уровня спецификация позволяет создавать изображения с генерированные из произвольного HTML: video, canvas, DOM content. Но, есть и проблемы безопасности имея полный доступ к изображению DOM.