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

в 11:59, , рубрики: css, CSS3 animation, Firefox, flame, html, браузеры, метки: , ,

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

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

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

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

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

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

Автор: spmbt

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js