Снежинки для сайта

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

Данный способ очень прост и заключается в добавлении всего одного скрипта на сайт.

Просто добавьте нижеприведенный JS на сайт либо файлом, либо скриптом внутри тега body:

Пример можно поглядеть на этой странице.

Не обязательно фиксировать снежинки в видимой области, как в примере, их можно пустить по всей странице. Для этого нужно заменить в строке 101 position:fixed на position:absolute, а marginbottom = document.documentElement.clientHeight+50 на marginbottom = document.body.clientHeight-snowmaxsize

Описание настроек даны в самом скрипте.

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Михаил:

    Отлично, спасибо. Мне понравилось

    Ответить
  • cupoma58:

    создал snow.js, подключил
    <script type="text/javascript" src="snow.js"> </script>
    перед </head> — не идёт снег!

    Ответить
    • Alexander:

      Подправил код и описание в статье.
      Вам нужно добавить внутрь тега

      <body>

      Лучше всего в подвал, ибо снег не главное.

      Ответить
  • Михаил:

    Прекрасное решение. Спасибо большое. Легко и здорово. Еще раз спасибо.

    Ответить
  • Александр:

    Класно смотрится, но не понимаю как на wordpress установить, подскажите кто-нибудь!

    Ответить
    • Alexander:

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

      или напишите в ВК мне, как многие делают :)) Пока за ето денег не беру 🙂

      Ответить
  • Сергей:

    У снежинки с кодом &#10052 игнорится цвет на мобильных устройствах, например хром на телефоне отображает ее постоянно как бело-синий градиент. Зато окрашиванию поддается снежинка с кодом &#10054 или &#10057, точно не вспомню.

    Ответить
    • Alexander:

      Эти коды вообще каждый браузер, как я понял, показывает как он хочет.
      Сейчас вот мозила обновилась, цвета пропали в BB-кодах, там символ &#9899
      Для теста вот он красный: , но не в мозиле, а в хроме…

      Ответить
  • Андрей:

    на битрикс как их установить?

    Ответить
    • Alexander:

      Как и на любой другой.
      В шапку, в подвал, на нужную страницу, в любой скрипт на сайте и т.д.

      Ответить
  • Сергей:

    Здравствуйте, Александр.
    Перелопатил десяток сайтов — ваши снежинки самые лучшие. Но у меня почему-то не запускаются. И кодом, и файлом на главную вставляю — ничего. Поможете?

    Ответить
    • Alexander:

      Напишите в ВК мне

      Ответить
  • Евгений:

    Добрый день. Изменение цвета снежинок не работает.

    Ответить
    • Alexander:

      Все работает 🙂
      Только если скрипт подключен файлом и смотрится в хроме, не забывайте про кеш.

      Ответить
  • Анна:

    Ребята, подскажите где вставить данный скрипт на движке OKAY CMS? Пробовали на разных страницах, не получается.

    Ответить
    • Alexander:

      Я с этой CMS не знаком, но принцип установки очень простой.
      У вас же как то подключена метрика, например. и т.д.
      Весь код помещаете в файл и подключаете его также в шаблоне.

      Если нужно подключить только на 1 страницу, то подключить можно прямо в статье.
      Если писать код в нее как он есть, визуальный редактор его испортит, а вот подключить файлом, думаю получится (не должен для админа блокироваться тег script.
      И соотв. вставлять надо в визуальном редакторе кодом, как то так:

      Ответить
      • Анна:

        Огромное спасибо!

        Ответить
      • Анна:

        Alexander, подскажите пожалуйста, как этот код поместить в файл?
        Пробовала по разному, делала как Вы написали, но ни как не получается…

        Ответить
        • Alexander:

          У вас ВКонтакте есть?
          Напишите мне, так быстрее будет 🙂
          https://vk.com/xazbix

          Ответить
  • Ксения:

    Подскажите, что за плагин для снежинок?

    Ответить
    • Ксения:

      Простите за глупый вопрос)) Затупила.

      Ответить
  • Юлия:

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

    Ответить
    • Alexander:

      В любое место страницы 🙂
      В шапку, в подвал и т.д.
      Какой у вас движок? могу конкретнее подсказать.

      Ответить
      • Юлия:

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

        Ответить
    • Alexander:

      Дайте ссылку на сайт 🙂

      Ответить
  • Kirill:

    document.write — крайне сомнительное решение, метод давно устарел.
    document.write вставляет HTML-код на страницу сразу после себя. Точнее говоря, сразу после тега "script", внутри которого он расположен. И только в том случае, если документ еще не был загружен полностью. А если был? Тогда страница очищается и заменяется на, что было указано.

    стоит его заменить на document.body.insertAdjacentHTML('beforeend', "");

    Ответить
    • Alexander:

      Спасибо, подправил

      Ответить
  • Андрей:

    Можно вместо стандартной "звездочки" поставить специальный символ "снежинка" — ❄
    код: &#10052

    Ответить
    • Alexander:

      Такая снежинка интереснее, обновил код 🙂

      Ответить