Как сделать снег на сайте
Добавил пользователь Владимир З. Обновлено: 05.10.2024
Поэтому, пока до НГ ещё несколько дней ещё зима, предлагаю устроить хакатончик по реализации лучших алгоритмов на канвасе и их аналогов на DOM, взяв за основу в основном древние нативные алгоритмы, которые как максимум обёртывались в плагин jQuery, чтобы было удобно подключать. Большая часть этих алгоритмов не соразмеряет нагрузку на процессор или сделана неэффективно, поэтому даже при малом числе снежинок грузят процессор на 100%. Вот пример обзорной статьи, где рассмотрены более 10 реализаций, не все, встречающиеся в природе. В дополнение, рассмотрим несколько избранных, чтобы получить задел на развитие алгоритма и реализацию его с хорошей эффективностью (получится ещё 5-6 вариантов). На этой основе можно построить доработку. Github с 12 демо (ссылки повторяются ниже) и несколькими алгоритмами.
Как обычно, жизнь статьи на Хабре не длится более 1.5 дней, поэтому нельзя рассчитывать акцию эффективной. Но после Нового Года случаются разные чудеса: поток посетителей падает, и случайные лунатики получают шанс не забыть одну статью целых 5 дней. На них и делается ставка.
Заглянем в историю и посмотрим на её ход
Давайте начнём с начала, с 2002-2005 годов примерно. Джаваскрипт показал способность анимировать падение снежинок. Правда, оказалось, и это было естественным, анимация на скрипте или непроизводительная, или сильно грузит процессор. Поэтому и в те старые времена нужно было или очень экономить ресурсы, или грузить процессор по максимуму, на 100% в потоке браузера, (на 1 ядре) что тормозило другие вкладки (в тех браузерах типа Оперы 9, где они были) и окна, и это вызывало плохо скрываемое негодование посетителей таких страниц.
Через лет 8 нашлось решение этой проблемы на уровне браузера. Основные браузеры, начиная с Хрома, стали приостанавливать выполнение скриптов на невидимых вкладках. Это помогло не мешать просмотру других окон и программ (но не приостанавливается при переходе на другое окно, а только уменьшается нагрузка, если окно не отрисовывается на экране или видно частично). Правда, в связи с мобильной эрой, открывание страниц с грузящей анимацией, всё равно, не воспринимается положительно.
Но за эти годы появился и более совершенный механизм анимации — Canvas. Сразу надо заметить, что другой новаторский механизм — анимации в CSS — не помогают экономить нагрузку, и тратят энергию процессора ровно столько же, как и анимация на Javascript + DOM. То есть, если искать лучшее решение, то приходится делать это в Canvas.
Canvas, как это будет видно в примерах, позволяет сотню снежинок запустить с нагрузкой 30-40% для среднего настольного компьютера или ноутбука. Это примерно в 5 раз эффективнее, чем умеют лучшие оптимизированные алгоритмы на JS+DOM.
Обзор алгоритмов с примерами
(При просмотре страниц с примерами будьте готовы к иногда 100%-ной загрузке ядра процессора. При показе ссылки в статье об уровне загрузки предупреждается.)
Многие алгоритмы, кроме того, что неэффективны, ещё и не похожи по поведению на реальное поведение снежинок. Наверное, многим помнится бросающееся в глаза несоответствие реальности движение снежинок по синусоиде. Однажды увиденное (или новее), оно запоминается надолго в качестве отрицательного примера. Поэтому, задача алгоритма — быть не только эффективным, но и отражающим реальность. (По эффективности, вычисление гармонических функций тоже должно проигрывать.)
Сведём увиденное в таблицу, где покажем:
*) количество частиц;
*) тип анимации;
*) наличие песочницы для экспериментов;
*) загрузка процессора (MacBook, Firefox 43) (Хром обычно % на 10 эффективнее);
*) комментарии об особенностях.
(Реальные данные загрузки процессора будут отличаться от указанных для разных компьютеров, для компьютеров с разными видеокартами и для мобильных устройств в широких пределах. Даны для ориентировки для среднемощного ноутбука со встроенной графикой.)
- Упакованный (обфусцированный) оригинальный код в песочнице с адаптацией к jQuery 2.
- Распакованный, но плохо движущийся (малые синусоиды) мод mod1 кода в песочнице с адаптацией к jQuery 2.
- Восстановленный с рефакторингом имён, стиля, максимально похожий и работающий код (Fiddle) этого скрипта в песочнице. Останавливается/запускается по кнопке останова. В сжатом виде — 1.5К.
- Расширенный до возможности запуска нескольких объектов в блоках или в целом окне. Запуск по коллекции. В сжатом виде — 1.8 К, меньше оригинального, который 2.2-2.4 для разных модов.
Цель отладки старого кода в том, чтобы потом алгоритм перенести на Canvas и сравнить скорости. (Калек побеждать — чести маловато.) В настройках я повторяю те же ошибки, над которыми критиковал других. Для разработчика неважно, что разноцветный снег, падающий в 2D, не бывает — главное, есть техническая возможность раскрасить. А ещё, летят не снежинки, а комки в реальности. Но 3/4 населения Земли этого не знает, так что нас ждёт успех… В наборе снежинок использовано большинство символов Unicode, похожих на снежинки — набралось аж 8. Можно найти ещё столько же.
Итак, получился читаемый код, на 20 строчек короче (90 строк) и в упакованном виде на 30% меньше (1.5К), чем лучшие образцы модов, не потеряв при этом функций и добавив стоп-старт-кнопку. Этот промежуточный вариант компактен, но работает, как и раньше, с окном и абсолютно может задавать высоту (height: число) в параметрах. Это не очень удобно, тем более, что плагин не использует контекстную коллекцию вообще, поэтому нормально себя чувствует с вызовом странного вида $().jSnow(. ), т.е. без контекста. Получилось довольно просто, ограничимся здесь ссылкой на демо.
И усложним задачу — начать работать с контекстными коллекциями jQuery. Сохраним это поведение, когда нет контекста — выбираем работу с окном, как и при контексте window и $('body')) и добавим работу с блоком-контейнером (например, запускать по $('.contSnow').jSnow(. ) ). Контейнер придётся подготовить, для него нужен position:relative, чтобы вставляемый блок с absolute хорошо себя чувствовал. Блок, который на всё окно, тоже начнёт себя вести по-другому, будет покрывать окно, поэтому весь контент страницы потребуется поднять, если будет такой блок. (Можно и иначе, по-старому, но зачем усложнять? Скорее, будут использовать или первый скрипт, или второй.) Получится примерно так:
В самом деле, зачем работать только с одним контейнером, если jQuery может предоставить коллекцию? Получается что-то типа такого, нагрузка 30-50% для суммы в 70-120 частиц. Остановку-запуск можно тоже разделить по кнопкам или сделать общей.
При попытках применить написанное сразу бросается в глаза непрактичность запуска скрипта на коллекции. Запустить — да, можно, даже десятки инстансов скриптов, раздавая каждому по чуть-чуть снежинок. Но всем блокам коллекции сообщаются одинаковые параметры, и это — непрактично, т.к. чаще хочется сделать другую задачу — запустить немного окон (виртуальных, на дивах), но с разными параметрами, а для этого приходится их сообщать одному элементу. Получается, чаще всего, что сколько элементов, столько нужно запусков .jSnow, что получается длинно, хотя и наглядно.
Тут возникает аналогия с написанием правил CSS. Правила — это те же декларации параметров, какие мы делаем при запусках плагинов, даже селекторы у плагинов стоят на своём месте. Но нет сейчас механизам постепенно накапливать описания правил (подобно тому, как в одном — font-size, в другом — position). Второй запуск плагина на том же элементе добавляет ещё один инстанс плагина (долгоиграющую функцию с замыканием и возможностью выключения), а не добавляет свойств к уже запущенному. При этом удобнее было бы перечислять селекторы (просто строки с классами), а не JSON-ы настроек. Но не припомнится ни одного плагина, где такой способ конструирования настроек был бы нужен и работал. На самом продвинутом варианте демо напишем запуск в 4 областях так, как плагин теперь умеет:
Доработки плагина добавили порядка 300 байт сжатого кода, но теперь он с бОльшим основанием может называться плагином. Правда, без единого метода.
Другие скрипты для работы с DOM
Такое внимание уделено одному скрипту, не самому продвинутому, потому что, если заглянуть вперёд, он оказывается небольшим конкурентом скриптам на Canvas, не тем, что выше, а хорошо, экономично написанным. Неэффективно написанные не станут конкурентами, поэтому в коде нельзя допустить ничего лишнего, чтобы было что с чем сравнивать.
Например, есть очень популярный скрипт на DOM под названием Snowstorm, со сжатым кодом 20К, очень большим количеством настроек, отключением в мобильных устройствах — есть, чему поучиться и для малых скриптов. Но изучать, что там лишнего и приводит ли это к потерям — слишком сложная задача. Проще написать малое и расширять настройки. Значимость каждой выяснится на тестах и практике.
Как там с CSS-анимациями?
Смотрим примеры, написанные другими, дальше, в поисках эффективных алгоритмов и эффектных результатов.
2. Анимация на 3 картиночных слоях в CSS (Codepen).
Пробуем смотреть ещё анимации на канвасе, чтобы найти не сильно нагружающий систему скрипт.
Все эти анимации, включая Canvas, почему-то настроены так, что грузят процессор на 100% (точнее, одно ядро, которое может загрузить однопоточный JS). Это будто бы считается нормальным для демонстраций скриптов. (Возможно, на дискретных видеокартах это так и есть.)
Как-то это всё странно
Среди скриптов со снегом встречается очень мало экономящих нагрузку процессора, хотя они есть как для DOM, так и для Canvas. Покажем, что того же эффекта полной загрузки можно добиться не для 100, а для пары тысяч снежинок, а нормальной лучше считать загрузку ядра на 10-20% для 200-400 штук.
Выбираем эффективный Canvas
Более детально, результаты такие. Берём jsFiddle как менее влияющий на результаты, копируем туда пример с добавлением кнопки остановки. Запускаем разное количество снежинок, ждём примерно минуту, пока расходы процессора успокаиваются (не двигая мышь, ничего не делая). Смотрим результаты через Activity Monitor (MacBook с видео Intel HD Graphics 5000). Если смотреть на Windows, скажем, на 4-ядерном процессоре, то увидим загрузку не более 25%. Называемые здесь в статье 100% относятся к загрузке одного ядра, т.е. 25% надо будет умножать на 4. Просто браузеры пока по-другому не умеют распараллеливаться, но и эта нагрузка для ноутбука достаточно чувствительна, приводит к расходу энергии, приблизительно как при просмотре видео.
Незапущенная отрисовка -10% нагрузки (фон).
0 частиц — 30%;
2 частиы — 35%;
25 частиц — 40%;
200 частиц — 50%;
1000 — 55%;
2000 — 65%.
При этом не всегда показания повторяются, зависит от других запущенных программ и занятости памяти.
Свои алгоритмы на канвасе
Создадим свои варианты экономичных алгоритмов на канвасе. Сначала замкнём плоскость в тор и пустим снежинки по ветру с небольшими случайными блужданиями, которые применяются к скорости каждой частицы. Получается довольно естественно, хотя без впечатления о порывах ветра. Второй эффект — параллакс, когда более мелкие частицы падают медленнее, что создаёт ощущение трёхмерности сцены.
Вначале нужно запустить заряд снега помощнее, чтобы быстро образовался покров. Через минуту он на глазах начнёт таять, а полностью растаявшие частицв снизу переходят наверх. Круговорот воды.
Скрипты Kafeman в рамках хакатона
Параллельно скрипты со снегом и другими праздничными эффектами делал kafeman.
Начальная идея — построить приветственную страницу с эффектами для посетителей клуба АДМ. Всё могло быть серьёзней, но история не терпит сослагательного наклонения. Кроме чисто декоративного оформления, посетила идея посмотреть на реальный снегопад (1, 2, 3) и смоделировать те неприятные близко мелькающие частицы снега. Совершенство ещё не достигнуто, но направление имеет все основания, иначе не вспомнится лепящийся на лицо отвлекающий снег. Тут надо поэкспериментировать с отрисовкой бесформенных хлопьев и их смазанным мельканием.
Накоец, на будущее идея объединения генераторов движков в один тоже заслуживает исполнения. По результатам, кроме массы скриптов сторонних авторов, имеем 3-4 алгоритма движения частиц и 2 способа реализации, общие части которых достаточно хорошо по представленным песочницам и репо отслеживаются.
Немного статистики. В связи с глобальным потеплением интерес к снегу в совокупности с Javascript, как и к лыжам — падает, а интерес к Canvas и Javascript — растёт. Теперь мы знаем, в какой комбинации будет обеспечен стабильный интерес.
Заключение
Выразительные возможности скриптов снега, в основном, на данном этапе исчерпаны (ничего качественно нового не появилось в последние годы в этой группе). У достаточно завершённых скриптов есть ряд свойств, признанных необходимыми, а часть невыполнимых по производительности свойств (вращение снежинок в формате 3D) не выполняется, но никого это не смущает. Но из-за производительной отрисовки на канвасе можно ожидать, что такие скрипты появятся (с нагрузкой от 30%).
Доброе время суток и с наступающим. В преддверии Нового года я хочу с вами поделить очень легким, красивым и неприхотливым плагином падающего снега. Этот скрипт действительно очень легкий и спокойно помещается в html файле, не затрудняя работы с самим html кодом сайта. Правда его можно и вынести в отдельный файл. Но для удобства я сделал все в одном файле.
Тут мало что можно сказать, лучше посмотреть демонстрацию этого падающего снега. Вдобавок там очень красивый фон и надпись "С Новым годом", написанная красивым шрифтом "Lobster" от Google. Вы с легкостью этот файл можете превратить в интернет открытку с поздравлением.
Подключение скрипта падающих снежинок на готовый сайт
1. Подключаем библиотеку jQuery
Подключается она так: между тегами и вставляете следующий код:
2. Подключаем стили
Вставьте css-код в свой css файл (обычно это style.css):
3. Создаем файл snow.js
Создадим файл snow.js и вставляем туда следующий javascript-код:
Подключаем js-файл в :
4. Вставляем html код
Ну и осталось самое главное - вставить html код падающего снега в любое места в :
Если вы все сделали правильно, то у Вас на сайте начнет падать снег.
Подключение фоновой картинки, большого заголовка и падающих снежинок
1. Скачиваем архив и его разархивировируем
2. Подключаем библиотеку jQuery
Обязательно подключить библиотеку jQuery (не обязательно, если у Вас уже подключена эта библиотека). Подключается она так: между тегами и вставляете следующий код:
3. Подключаем шрифт "Lobster"
Аналогично подключению бибилиотеки jQuery, подключаем шрифт для нашей надписи "С Новым годом":
Естественно, если Вам не нужна эта надпись и шрифт, вы можете его не подключать, но тогда и в css уберите у атрибута H1 "font-family: 'Lobster', cursive;", или замените его на свой шрифт
4. Подключаем стили
Вариант А. Вставьте css-код в свой css файл. Вот код:
Вариант B. Также можно создать отдельный файл, например snow.css и вставить этот же код туда, правда его надо будет подключить в head следующим образом:
5. Подключаем скрипт падающего снега
Вариант А. Для этого нам нужно вставить в самый низ сайта (до закрытия
Как на сайте сделать такую штуку как падающий снег. Отличное решение для любого сайта и CMS, реализованное на чистом CSS без использования JavaScript.
Продолжая зимнюю тематику, хочу поделиться тем, как можно реализовать на сайте такую штуку как падающий снег.
Данный эффект сделан на CSS, что в отличии от JavaScript не создаёт нагрузок на браузер посетителя сайта.
Реализовать можно на любом сайте независимо от его CMS (движка).
CSS падающий снег для сайта
Думаю что долго со вступлением затягивать не нужно и сразу перейдём к демо:
А у нас зима!
Ну как? Нормально?
Замечу, что это не картинка, а блок div для которого прописан CSS падающего снега.
Реализация самая простая - три изображения и небольшой код CSS.
Добавьте этот код в основной css файл вашего сайта.
В коде главное правильно указать пути к изображениям в свойстве background-image у класса body.
Укажите пути к изображениям так, как они лежат у вас на сайте.
Изображения снега
Чтобы скачать изображения снега, нажмите на кнопку ниже:
Скачанный архив распакуйте и из папки img залейте все три изображения к себе на сайт.
Но в целом, с применением всех стилей сайт становится живее, появляется праздничное настроение. Вам придется немного его настроить, чтобы он работал так, как вам нужно, но это не составит большого труда. Итак, перейдем к установке.
Принцип работы и установка
Сначала нужно объяснить принцип, но не будем вдаваться в такие подробности, как создавать анимацию на CSS3, это вовсе не урок. Изначально это был блок со снегопадом фиксированной ширины, но это не целесообразно.
Выберите блок на сайте, внутри которого нужно будет организовать снегопад. Например, у нас это будет блок с классом .top , внутри него поместим HTML-код снегопада (он ниже), т.е. между
Чтобы снег был именно в этом блоке, нужно к блоку .top прописать position:relative , вот так:
Непосредственно установка
Для начала займемся установкой CSS стилей и активацией анимации. Для этого мы вставим следующий код в нашу таблицу стилей. Еще обратите внимание, рекомендуется сохранить картинки снега к себе на сайт, чтобы потом не возникало проблем с их загрузкой.
И далее вставим небольшой HTML код снегопада. Выберите именно тот блок, в котором должен идти снег.
Посколько снегопад на CSS3 представляет собой несколько слоев, которые просто ложатся на блок, может случиться ситуация, при которой элементы в самом блоке не смогут выполнять функции. Если такое случилось, поэксперементируйте с z-index .
Ну вот и все. Если у вас есть вопросы пишите в комментариях, будем решать их вместе. Еще зима не началась, а уже с наступающим!
Читайте также: