Comments 14
Во всех трёх областях на демо-страничке (http://spmbt.github.io/snowfalls/jSnowMultiWin.htm) снежинки жутко тормозят. Может подобное лучше делать на WebGL? Флеш в браузере играет тысячи частиц без потери фпс(60), js должен тоже уметь.
снежинки и прочее подобное я изредка делал для рекламных банеров на adobe flash.
тех требования площадок ограничивали загрузку процессора и размер кода.
самый простой способ рисовать снежинки используемой мной — сделать png картинку с прозрачным фоном и гонять её 3-4 инстанса разных размеров поверх/позади основной картинки ролика без дополнительных эффектов прозрачности — по размеру баннера и загрузке процессора не было проблем.
тех требования площадок ограничивали загрузку процессора и размер кода.
самый простой способ рисовать снежинки используемой мной — сделать png картинку с прозрачным фоном и гонять её 3-4 инстанса разных размеров поверх/позади основной картинки ролика без дополнительных эффектов прозрачности — по размеру баннера и загрузке процессора не было проблем.
Почему-то все пытаются прямо таки засыпать экран снегом.
Хотя намного красивее (особенно для сайта с меню в шапке), когда канва находится сразу после открытия body, имеет размер 100% и позицию fixed.
Тогда снег падает за элементами, которые расположены в центре и по бокам. В итоге картинка более приятна глазу так как нет замусоренности в центре и ничего не отвлекает от навигации.
Под спойлером «затертый» скриншот:
Хотя намного красивее (особенно для сайта с меню в шапке), когда канва находится сразу после открытия body, имеет размер 100% и позицию fixed.
<canvas id="canvas" width="100%" height="100%" style="position: fixed">
</canvas>
Тогда снег падает за элементами, которые расположены в центре и по бокам. В итоге картинка более приятна глазу так как нет замусоренности в центре и ничего не отвлекает от навигации.
Под спойлером «затертый» скриншот:
Заголовок спойлера
Дайте лучше ссылку на сайт. Что это за самопиарофобия?
Сайт не мой, я его у себя размещаю и периодически плюшки добавляю. Представляет из себя «тяжелое наследие» php, обвязанное nginx'ом и местами фишки на jsp.
Увы, мне не платят столько, чтобы я его пиарил:)
Основная суть в том, что снег на вкус и цвет моих фломастеров стоит пускать по краям. И лучший вариант — это сайт с вертикальным оформлением. И слой у снега должен быть под все остальными слоями. Чтобы не сильно резали глаз пропадающие снежинки — по бокам от контента ставим png'шки, у которым прозрачность от 0 до 100% слева направо и справа на лево (соотв. левая и правая сторона).
Пример сходу на jsfiddle накидать вам не могу, так как не дружу с css и использую решения и их модификации.
Увы, мне не платят столько, чтобы я его пиарил:)
Основная суть в том, что снег на вкус и цвет моих фломастеров стоит пускать по краям. И лучший вариант — это сайт с вертикальным оформлением. И слой у снега должен быть под все остальными слоями. Чтобы не сильно резали глаз пропадающие снежинки — по бокам от контента ставим png'шки, у которым прозрачность от 0 до 100% слева направо и справа на лево (соотв. левая и правая сторона).
Пример сходу на jsfiddle накидать вам не могу, так как не дружу с css и использую решения и их модификации.
Оптимизировал, починил и приукрасил css версию: codepen.io/anon/pen/xZqbrJ?editors=110
Перспективы кодирования — можно написать конструкторы, которые давали бы объект для DOM или Canvas по настройкам. Конструкторы могли бы писать разные авторы. С таким подходом организован проект на ХабраАДМе (Гитхаб): github.com/clubadm/snowmachine.
Выложил прототип. Алгоритм движения снежинок не зависит от способа отрисовки.
В настоящий момент доступен только
CanvasBackend. Как писал kozyabka выше, стоит попробовать WebGL. В случае со snowmachine, для этого достаточно написать WebGLBackend, а сам алгоритм останется прежним. В случае со скриптами spmbt, придется править код полностью, и потом вручную его мержить.Можно написать и какой-нибудь экзотический бекенд, нужный только для одного конкретного проекта. Так планируем поступить мы на geekadm.ru.
Демо: jsfiddle.net/9qxyq2vj (берется последняя версия с Github'а, который на это не рассчитан, поэтому могут быть проблемы)
Я возможно что-то не понимаю, но ведь если на всю страницу наложить canvas, то сайт станет нефукционален? Все кнопки-ссылки будут некликабельны.
мой коллега попросил оставить вот эту гифку с визуализацией алгоритма, который он разработал в 2009 году и усовершенствует. Реализации прошли путь от Паскаля, через Action Script до Javascript'a. На днях он соберётся с духом и опубликует в песочнице полную статью.
Что вы называете битрейтом? Я так и не понял.
Sign up to leave a comment.
Анимация падающего снега на Canvas эффективнее анимации на DOM в несколько раз