- PVSM.RU - https://www.pvsm.ru -
Зайдя на домашнюю страницу браузера 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
Нажмите здесь для печати.