Pull to refresh

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

Reading time2 min
Views6.1K
Зайдя на домашнюю страницу браузера 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)), но происхождение рисунка огня неясно, потому что его пришлось выцепить из работающей страницы.

UPD: k12th сделал апдейт стилей, чтобы они работали в Chrome/Webkit, но пока они там анимируются не совсем так (чтобы не сказать «хуже»), чем в Firefox. Но всё равно, спасибо ему за первую итерацию к кроссбраузерности (если будут ещё реквесты, принять смогу в понедельник, сорри).
Tags:
Hubs:
+16
Comments20

Articles