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

Содержание

Скрипт падающего снега

Многие из моих читателей знают, что этот блог преимущественно про WordPress, но иногда, как, например, в этот раз, я делюсь скриптами JS, шаблонами HTML и другими полезными штуками, имеющими косвенное отношение к нашей любимой CMS. В любом случае, то что мы сегодня делаем, можно применить и на WordPress, правда, не в привычном виде (как это всегда бывает с Custom JS в рамках WP). Итак, перейдем к скрипту.

Для того чтобы добавить снег на наш веб-сайт, потребуется

  1. Скачать этот архив;
  2. Распаковать его на вашем сайте;
  3. Подключить перед закрывающем тегом </body> следующий код:

Обычные снежинки (круглые, без использования изображения):

<script src="js/snowfall.js"></script>
<script type="text/javascript">
     (document).ready(function(){
        $(document).snowfall();
     }); 
</script>

Снежинки с картинкой

<script src="js/snowfall.js"></script>
<script type="text/javascript">
     (document).ready(function(){
          $(document).snowfall({image :"assets/img/snow4.png", minSize: 10, maxSize:20});
     });
</script>

Для второго варианта нужно отметить ряд параметров, которые можно настроить кастомно. Их можно найти в таблице ниже.

flakeCount Количество снежинок на странице (одновременно)
flakeColor Цвет снежинок
minSize Минимальный размер снежинки
maxSize Максимальный размер снежинки
maxSpeed Максимальная скорость
minSpeed Минимальная скорость
round Округление снежинок (значение true или false)
shadow Тень снежинок (значение true или false)

Разобраться с параметрами не сложно. Думаю, что можно сделать это, основываясь на примере ниже:

<script type="text/javascript">
    (document).ready(function(){
         $(document).snowfall({ 
flakeCount: 300,
                 image :"assets/img/snow4.png",
                 minSize: 20,
                 maxSize:30,
                 round: true, 
                 shadow: false,
         }); 
     });
</script>

На всякий случай приведу пример: выделенный желтым параметр flakeCount — это количество снежинок на странице одновременно. 

Пример работы скрипта

Рабочий скрипт до конца зимы можно наблюдать на этом сайте: https://1ry.ru. Если вы пришли позже, то вот картинка:

Как работает снег на сайте. Скрипт снега на сайт.

Не получается / не работает, что делать?

Попробуйте подключить JQuery. Пример подключения:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Если нет возможности, или желания разбираться с распаковкой архива скрипта снега, вы можете подключиться к скрипту удаленно. Для этого разместите на своем сайте внутри тега <body> такой код:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://1ry.ru/js/snowfall.js"></script>
     <script type="text/javascript">
     $(document).snowfall();
</script>

Как работает на WordPress

Как-то я записывал видео по вставке кастомных JS скриптов. Самое время поделиться им еще раз:

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

В завершении хочется добавить, что скрипт OpenSource’сный. Никакой поддержки, гарантии, или связи с автором нет. JS минифицирован, копаться глубоко в нем я не стал. Но на пару своих сайтов я поставил и проблем, тормозов, или уязвимостей не нашел.