- PVSM.RU - https://www.pvsm.ru -

Немного огня на чистом CSS (Firefox)

Немного огня на чистом CSS (Firefox)Зайдя на домашнюю страницу браузера Firefox about:home (автономная, в самом браузере), обнаружил там неплохую реализацию пылающего огня, сделанную на не очень тяжёлых анимированных спрайтах, под лицензией LGPL (по крайней мере, в стартовом about-home-Fx.js). Не каждый день встретишь качественный огонь на скриптах в браузере. При ближайшем рассмотрении оказалось, что это даже не скрипты, а целиком анимированный CSS. Небольшой скрипт используется только для старта и останова. Используя эту идею и формат, дизайнеры смогут создать свою реализацию огня, дыма или текущей воды.

Поиск по ключевым словам из кода в интернете результата не дал, поэтому, как и с машиной Тьюринга [1] (Гитхаб [2]), тут же возникло желание освободить скрипт и стили от оков случайности и таинственности. То есть, положить его в читаемом и рабочем виде в открытый стабильный источник. Иначе, закончится Олимпиада — и будут все шансы исчезнуть ему из поля зрения. И вот результат:
github.com/spmbt/flame-animate-css-mozilla [3]

(Смотреть единственный файл index-snap-flame.htm в Firefox; при желании можно посмотреть все элементы, которые были на странице, в index-snap-flame-originalRu.htm, скачав всю папку /originalMoz, тоже с анимацией.)

Демо: spmbt.kodingen.com/demo/index-snap-flame.htm [4]
(Из-за особенностей кодирования CSS анимация будет работать только под Firefox; если дадут пулл-реквест или форк с кроссбраузерным кодом в новом файле, с удовольствием смержу).

Анимация, естественно, заточена под Мозиллу, но, скорее всего, переписывание стилей не помешает запустить её на остальных современных браузерах.

C лицензией и авторством — не очень понятно, кроме того, что это — мозилловская разработка специально для внутренних скриптов браузера. Стартовый скрипт aboutHome.js имеет лицензию LGPL (3 автора, включая основного — Marco Bonardo (original author)), но происхождение рисунка огня неясно, потому что его пришлось выцепить из работающей страницы.

Автор: spmbt


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/firefox-2/12941

Ссылки в тексте:

[1] с машиной Тьюринга: http://habrahabr.ru/post/146444/

[2] Гитхаб: https://github.com/spmbt/gTuringMachine

[3] github.com/spmbt/flame-animate-css-mozilla: https://github.com/spmbt/flame-animate-css-mozilla

[4] spmbt.kodingen.com/demo/index-snap-flame.htm: http://spmbt.kodingen.com/demo/index-snap-flame.htm