Великолепный скрипт падающего снега на сайт на JS+CSS + сугробы!

Привет, друзья. Я пишу этот пост в январе, когда он уже никому не нужен, но это не потому, что я тормоз, а потому, что я решил подготовиться к следующему новому году заранее!

Когда я смотрю на снежинки на сайте, становится тепло и уютно, я чувствую какое-то умиротворение. А так как я живу в Краснодаре, где снег бывает редко, а сугробы и вовсе случаются раз в 5–10 лет, ценность такого зрелища возрастает.

Вы помните те времена, когда ближе к новому году на многих сайтах появлялись снежинки, от чего процессор компьютера офигевал сразу на 100%? Я решил, что это давно в прошлом, потому что не видел ничего подобного уже много лет.

Но в декабре какое-то ностальгическое потрясение случилось – кто-то из клиентов нашей студии попросил: «Сделайте мне снежинки на сайт!»

ШТО? А потом еще один! КАК? Что происходит!

Я не могу объяснить это странное поведение. Но что нам оставалось в такой ситуации? Мы могли только взять и сделать.

Итоговый результат оказался настолько классным, что мы предложили установить скрипт и остальным клиентам, ну, и на свой сайт установили, конечно!

Скорее всего, не только наши клиенты странные, поэтому я решил, что и вам, дорогие читатели, и вашим клиентам могут пригодиться наши гипнотизирующие новогодние снежинки для сайта!

Сначала я вам покажу, как выглядит падающий снежок, чтобы вы решили, нравится он вам или нет и только потом приступили к установке скриптов на сайт.

*тут я завис с мыслью, что картинки не смогут передать всю прелесть происходящего. Гифка окажется слишком большой по размеру и будет долго грузиться. Значит, видео? Уже лучше, но все равно не аутентично*

И меня осенило! На странице, где я пишу про падающие снежинки, внедрить этот самый скрипт, чтобы он всегда работал, хоть летом, хоть зимой. На других страницах скрипт не будет работать, а на этой будет. По-моему – это лучшая иллюстрация!

Я установил css и js-скрипт только на этой странице, и ❄️ на ❄️ ней ❄️ прямо ❄️ сейчас ❄️ должен ❄️ идти ❄️ снег ☃️.

Если вы читаете с телефона, то ничего не увидите, т. к. у меня используется отдельный мобильный шаблон. Так что при просмотре с телефона сначала в настройках вашего браузера измените отображение на «версию для ПК», а если не поможет, пролистайте эту страницу до низа и нажмите переключатель темы на «компьютерная».

Но не беспокойтесь, на вашем сайте данный скрипт будет работать и на мобильном. А конкретно мою страницу лучше просматривать с компьютера, вы ведь все равно не будете устанавливать скрипты на сайт через телефон.

А еще я рекомендую вам включить темную тему, на ней снег выглядит гораздо эффектнее, для этого у меня в самом верху справа есть переключатель, вы сразу его заметите.

И все же оставлю для вас два скриншота:

Особенности скрипта снегопада

❄️ Используется CSS + JS поэтому не тормозит и не вешает сайт (мы проверили – при открытии в браузере нескольких вкладок со снежинками, нагрузка на процессор не увеличивается).

❄️ Можно изменять буквально все: иконку, цвет, количество снежинок и сугробов, их высоту и скорость роста… Ниже я перечислю все возможные переменные.

❄️ Все адаптивно – снежинки и сугробы будут смотреться одинаково волшебно и празднично и на компьютере, и на планшете, и на телефоне!

❄️ Можно подключить удаленный скрипт, если у вас нет возможности залить файлы на сервер. Это актуально для SaaS-платформ, типа Тильды, Wix, Юкоз, insales и тому подобных, а также для любых других сайтов, когда у вас нет доступа к файловой системе.

Какой же снег без сугробов?

Вообще-то данный скрипт снега мы с коллегами написали еще в декабре 2021 года. И просто ради веселья я поделился им в телеграм-канале, думая, что получится просто шутка, и никто в здравом уме не будет ставить скрипт себе на сайт. Но в комментариях поступило столько откликов и благодарностей, что я до сих пор не верю, что это было наяву ?

А еще кто-то написал снегопада без сугробов не бывает. Согласен!

Вроде, посмеялись и забыли, но через пару дней из программного отдела пришло сообщение: «Ребятки, недавно Оля сделала непоправимую красоту вашим сайтам в виде прекрасных снежинок. Но их стало так много, что снежинки скопились в сугробы!»

Вы тоже считаете, что без сугробов никак? Вам повезло!

Кстати, а что будет, если сугробы вырастут выше гор? Уверен, пока вы дочитали до этого места, снегоуборочная машина несколько раз убирала заносы на экране вашего монитора, а иначе все бы уже замело, и вы не смогли ничего прочитать! ?

Как у становить код снега на сайт

1. Скачать архив и распаковать,
2. Залить папку snowFlakes в корень сайта,
3. Подключить css-стили и js-скрипт,
4. Сбросить кеш (опционально).

Пример подключения скрипта на сайт:

Перед закрывающим тегом </head> надо добавить строку, которая подключит нам css-стили:

<link href="/snowFlakes/snow.min.css" rel="stylesheet">

После открывающего тега <body> надо добавить подключение js-скриптов:

<script src="/snowFlakes/Snow.js"></script>
<script>
	new Snow ();
</script>

В данном примере предполагается, что папка с файлами и скриптами для снежинок расположена в корне сайта, где лежит главный index.php. Если же вы решите загрузить папку в другое место (например, в папку с текущей темой оформления сайта), убедитесь, что указали правильный путь до css и js файлов (можно указывать и относительный, как это сделано сейчас, и абсолютный, начинающийся с https://site.ru/).

Подключение удаленного скрипта снега

Данный метод для тех, кто не может загрузить файл на сервер. Так что тут все еще проще.

Надо подключить css-стили строкой:

<link href="https://cdn.jsdelivr.net/gh/Alaev-Co/snowflakes/dist/snow.min.css" rel="stylesheet">

А также подключить js-скрипты:

<script src="https://cdn.jsdelivr.net/gh/Alaev-Co/snowflakes/dist/Snow.min.js"></script>
<script>
	new Snow ();
</script>

Все готово! Не забудьте только сбросить кеш (нужно только если снег не появился сразу).

Это опенсорс, детка

Если вы заметили, для обеспечения подключения удаленного скрипта я использовал не свой сервер, а всем известный www.jsdelivr.com, который, как гласит заголовок: «A free CDN for Open Source».

А работает этот CDN через GitHub, куда мы и выложили в публичный доступ наш скрипт (js+css) снегопада:
https://github.com/Alaev-Co/snowflakes

Здесь же приютились несколько демок, где вы можете увидеть работу скрипта:

Просто снегопад: https://alaev-co.github.io/snowflakes/examples/snowflakes.html
Снежинки, сугробы и снегоуборочная машина: https://alaev-co.github.io/snowflakes/examples/snowflakes-with-snow-balls.html

Можете скачивать, делать форки, крутить и вертеть, словом, использовать, как вам захочется и где захочется — мы не обидимся!

Как я уже сказал, скрипт довольно гибкий, и в нем можно все поменять. Но мы постарались изначально настроить так, чтобы вам не хотелось во всем этом разбираться.

Поэтому вы можете и не читать дальше, а просто идти и наслаждаться результатом. Ниже будет техническая информация, скажем так, для энтузиастов.

Настройка снежинок и сугробов

В таблице я перечислил все возможные переменные и допустимые значения (если ячейка пустая, значит ограничений нет). А ниже я опишу, как это можно использовать.

Я решил, что переменные, где надо указать изображение снежинки и снегоуборочной машины требуют пояснения. В таблице я указал просто «svg», так как все значение слишком больше для ячейки. Поэтому я решил привести пример значения по умолчанию ниже.

Переменная icon (изображение снежинки) по умолчанию содержит:

<svg fill="${iconColor}" xmlns="http://www.w3.org/2000/svg" width="${iconSize}" height="${iconSize}" viewBox="0 0 50 50"><path d="M24.97- .03A2 2 0 0 0 23 2v4.17l-1.9-1.89a2 2 0 0 0-1.43- .6 2 2 0 0 0-1.39 3.43L23 11.83v9.7l-8.4-4.85-1.74-6.46a2 2 0 0 0-1.9-1.51A2 2 0 0 0 9 11.25l.7 2.6-3.64-2.1a2 2 0 0 0- .95- .28 2 2 0 0 0-1.05 3.75l3.63 2.1-2.57.69a2 2 0 1 0 1.04 3.86l6.43-1.72L21.02 25l-8.41 4.85-6.4-1.72a2 2 0 0 0- .6- .07A2 2 0 0 0 5.18 32l2.53.67-3.64 2.1a2 2 0 1 0 2 3.47l3.63-2.1- .67 2.5a2 2 0 1 0 3.87 1.04l1.7-6.36L23 28.5v9.68l-4.68 4.68a2 2 0 1 0 2.83 2.83L23 43.83V48a2 2 0 1 0 4 0v-4.17l1.88 1.87a2 2 0 1 0 2.82-2.83l-4.7-4.7v-9.7l8.4 4.85 1.74 6.46A2 2 0 1 0 41 38.75l- .7-2.6 3.64 2.1a2 2 0 1 0 2-3.47l-3.64-2.1 2.56- .68a2 2 0 0 0- .5-3.94 2 2 0 0 0- .54.07l-6.41 1.72-8.38-4.83 8.43-4.86 6.38 1.7a2 2 0 1 0 1.03-3.85l-2.5- .68 3.57-2.05a2 2 0 0 0- .91-3.75 2 2 0 0 0-1.1.28l-3.64 2.1.7-2.6a2 2 0 0 0-2.03-2.54 2 2 0 0 0-1.84 1.51l-1.73 6.46L27 21.57v-9.74l4.72-4.72a2 2 0 1 0-2.83-2.83L27 6.18V2a2 2 0 0 0-2.03-2.03z"/></svg>

Переменная snowPlowImage (изображение машинки) по умолчанию содержит:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="63.793"><path fill="none" d="M100 0H78.448v21.552H100V0Z"/><path fill="#A8D6DA" fill-rule="evenodd" d="M48.276 32.759v1.724h13.793v-12.07H50L48.276 32.76Z"/><path fill="#C0F5F9" fill-rule="evenodd" d="M50 32.759h12.069v-8.621H51.724L50 32.758Z"/><path fill="#EBEBEB" d="M68.966 22.414v1.724h27.586v-1.724l-5.81-6.03a10.776 10.776 0 0 0-15.243- .276l-6.533 6.306Z"/><path fill="#C38325" fill-rule="evenodd" d="M70.69 37.931v1.724h24.138v-1.724l3.448-6.896v-8.621H67.24v8.62l3.449 6.897Z"/><path fill="#DA922A" fill-rule="evenodd" d="M48.276 32.759 32.759 37.93h-1.724v13.793H50V32.76h-1.724ZM100 37.931H60.345v18.966H100V37.93Z"/><path fill="#EA9D2D" fill-rule="evenodd" d="M98.276 22.414H67.24v8.62h31.035v-8.62ZM62.069 32.759H48.276v24.138h13.793V32.759Z"/><path fill="#F7F7F7" d="M0 62.431v1.362h25.862V53.448a6.897 6.897 0 0 0-12.911-3.373 5.174 5.174 0 0 0-5.994 5.895l-1.472.196A6.32 6.32 0 0 0 0 62.43Z"/><path fill="#EBEBEB" d="M.356 63.793h25.506v-6.896a6.897 6.897 0 0 0-12.911-3.374 5.174 5.174 0 0 0-5.994 5.895l-1.472.196a6.313 6.313 0 0 0-5.13 4.18Z"/><path fill="#DBDBDB" fill-rule="evenodd" d="M48.276 44.828H32.759v6.896h15.517v-6.896Z"/><path fill="#DA922A" fill-rule="evenodd" d="m79.31 37.931-1.724-6.896h10.345l-1.724 6.896H79.31Z"/><path fill="#EBEBEB" fill-rule="evenodd" d="M63.793 10.345a3.448 3.448 0 1 0-6.896 0 3.448 3.448 0 0 0 6.896 0ZM37.931 22.414a3.448 3.448 0 1 0-6.896 0 3.448 3.448 0 0 0 6.896 0ZM29.31 3.448a3.448 3.448 0 1 0-6.896 0 3.448 3.448 0 0 0 6.896 0ZM94.828 3.448a3.448 3.448 0 1 0-6.897 0 3.448 3.448 0 0 0 6.897 0ZM15.517 31.035a3.448 3.448 0 1 0-6.896 0 3.448 3.448 0 0 0 6.896 0ZM10.345 13.793a3.448 3.448 0 1 0-6.897 0 3.448 3.448 0 0 0 6.897 0Z"/><path fill="#EA9D2D" d="M21.983 56.897h3.88V34.483h3.307a3.589 3.589 0 0 1 3.589 3.588v23.136a2.586 2.586 0 0 1-2.587 2.586H18.965v-3.88a3.017 3.017 0 0 1 3.018-3.016Z"/><path fill="#C3C3C3" fill-rule="evenodd" d="M100 55.172a8.62 8.62 0 1 0-17.241 0 8.62 8.62 0 0 0 17.241 0Z"/><path fill="#EBEBEB" fill-rule="evenodd" d="M94.828 55.172a3.448 3.448 0 1 0-6.897 0 3.448 3.448 0 0 0 6.897 0Z"/><path fill="#C3C3C3" fill-rule="evenodd" d="M82.759 55.172a8.62 8.62 0 1 0-17.242 0 8.62 8.62 0 0 0 17.242 0Z"/><path fill="#EBEBEB" fill-rule="evenodd" d="M77.586 55.172a3.448 3.448 0 1 0-6.896 0 3.448 3.448 0 0 0 6.896 0Z"/><path fill="#C38325" fill-rule="evenodd" d="M65.517 50H55.172v6.897h10.345V50Z"/><path fill="#C3C3C3" fill-rule="evenodd" d="M55.172 55.172a8.62 8.62 0 1 0-17.241 0 8.62 8.62 0 0 0 17.241 0Z"/><path fill="#EBEBEB" fill-rule="evenodd" d="M50 55.172a3.448 3.448 0 1 0-6.896 0 3.448 3.448 0 0 0 6.896 0Z"/></svg>

Как видите, это обычное svg-изображение, точнее сказать, текстовое содержимое файла svg. Если вы возьмете любую svg картинку и откроете ее в блокноте, увидите что-то подобное.

Так что если вы решите поменять наши стандартные изображения на свои:

• Находите нужное изображение,
• Открываете его в блокноте,
• Копируете текст полностью,
• Указываете его через переменную, например: icon = `ваш текст`.

Возьмем самый простой пример – svg-иконка с изображением обычного черного квадрата. Я ее скачал, открыл в блокноте, увидел следующее содержимое:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="64" height="64"><path d="M 6 6 L 6 26 L 26 26 L 26 6 L 6 6 z"/></svg>

Тогда код для вставки на сайт, где вместо снежинок будут квадраты, получится таким:

<head>
	<link href="/snowFlakes/snow.min.css" rel="stylesheet">
</head>
<body>
	<script src="/snowFlakes/Snow.js"></script>
	<script>
		new Snow ({
			icon: ’<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="64" height="64" fill="#000000"><path d="M 6 6 L 6 26 L 26 26 L 26 6 L 6 6 z"/></svg>’,
			showSnowBalls: true,
			showSnowBallsIsMobile: true,
			showSnowflakes: true,
			countSnowflake: 100,
			snowBallsLength: 10,
			snowBallIterations: 40,
			snowBallupNum: 1,
			snowBallIterationsInterval: 1000,
			clearSnowBalls: 20000,
		});
	</script>
</body>

Кроме иконки я указал и все остальные переменные, чтобы вы понимали в каком формате их указывать.

Что касается кастомизации самой иконки, если это какая-то сложная картинка, типа снегоуборочной машины, изменять ее лучше через графический редактор, поддерживающий работу с векторными изображениями.

А если это что-то простое типа квадрата или снежинки, то вас могут заинтересовать только настройки размера через width="64" height="64" и цвета заливки через fill="#000000". Уверен, вы разберетесь!

Надеюсь, наш скрипт падающих снежинок и сугробов понравится вам и посетителям ваших сайтов! ❤️

Скорее всего, вы читаете этот пост примерно в декабре, а значит я могу вас поздравить с наступающим Новым Годом! ??

Можете оставлять в комментах отзывы и поздравления, если хотите!

До связи, друзья.