Sozdaiblog.ru
Назад

Как сделать Снегопад на Сайте с помощью JQuery?

Опубликовано: 22.11.2012
Время на чтение: 5 мин
27
6

Снег на сайтХорошего настроения, всем читателям — Sozdaiblog.ru!

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

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

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

По многочисленным просьбам читателей, которые были отправлены через форму обратной связи, было найдено великолепное решение.

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

 

Снег  на сайте с JQuery.

Чтобы устроить снегопад на сайте, Вам потребуется нажать на снежинку и скачать необходимые файлы.

 

Снег на сайт

 

Затем, нужно распаковать архив и загрузить содержимое в корневую папку Вашего ресурса. У многих, это папка Public_html.

Теперь, открываем папку с активной темой оформления WordPress и находим файл header.php.

Открываем его на редактирование и до закрывающего тега </ head> вставляем следующие скрипты:

 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script><script type="text/javascript" src="jquery.snow.js"></script>

 

Далее, находим  тег  <body> и после него вставляем скрипт снега:

 

<script>
$(document).ready( function(){
$.fn.snow();
});
</script>

 

Не забываем сохраняться и чистить кэш браузера.

Все манипуляции советую делать с помощью Notepad++ и FTP-клиента.

В принципе, больше делать ничего не нужно снег нормального белого цвета и его скорость падения оптимальна.

Конечно, если Вы любите поэкспериментировать или у Вас полностью белый сайт на фоне, которого сливаются все снежинки, то откройте файл — jquery.snow.js  и поменяйте соответствующие значения:

 

 

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

Скажите, понравился ли Вам эффект снега на сайте?

Друзья, чуть не забыл. Примерно неделю назад у меня брал интервью один из наших общих коллег по блоггингу — Александр Красильный. Прочитать наш диалог можно тут.

До следующих статей…

 

С уважением, Денис Черников!

Поделиться
Похожие записи
Комментарии:
  • Александр Красильный
    Опубликовано: 22.11.2012 Ответить на сообщение

    Здравствуйте Денис. Украсить блог к Новому Году — это обязательная процедура почти для любого блоггера.
    Я вот тоже занялся украшениями и слегка переделал шапку, фон и кнопку «вверх». Вышло даже ничего так...
    Вот задумываюсь по поводу снега. Когда-то использовал плагин на старом сайте, но он меня особо не впечатлил. А Ваш вариант со снегом при помощи jquery выглядит заманчивым!
    Кстати, друзья, почитайте обязательно интервью, оно вышло очень интересным и занимательным! =)
    И на последок... Денис в последнее время Ваш блог иногда прилично подтормаживает при загрузке. Такое ощущение, что Вас пытается кто-то «досить»...

    • Денис Черников
      Опубликовано: 22.11.2012 Ответить на сообщение

      Здравствуйте, Александр! Скажите, а не выдаёт ли система каких-либо кусков кода при обращении к моему сайту? Может повлияло размещение слайдера. Вы давно заметили тормоза? А снег прикольный!))

      • Александр Красильный
        Опубликовано: 22.11.2012 Ответить на сообщение

        Доброе утро! Кусков кода вроде как не замечал. Тормоза заметил кстати после установки слайдера...
        Что касается снега. Все таки я решился поставить у себя Ваш вариант снегопада, но столкнулся с одной проблемой. Ранее была установлена кнопка «вверх» используя так же Ваш вариант с jquery. Так вот после установки снегопада, у меня пропадает кнопка «вверх».
        Методом «тыка» выяснил, что, скорее всего сбой дает первая часть скрипта, которая пишется до закрывающегося тега /head.
        Помогите в решении данной проблемы, а то снегоуборочная машина стоит без дела. =)

        • Денис Черников
          Опубликовано: 22.11.2012 Ответить на сообщение

          Доброе, Александр! Возможно тормоза не от доса, а от прироста трафика и слайдера. Видимо нужно тарифный план на хосте менять или на VPS переходить!
          На счёт снега, у меня кстати стрелочка на месте, попробуй первый скрипт удалить. Он отвечает за подключение библиотеки квери. Если она уже подключена, возможно конфликтует! Или попробуйте в разные папки распихать файлы.

  • blogrub
    Опубликовано: 22.11.2012 Ответить на сообщение

    Я бы снежок сделал только 31 декабря и 1 января

    • Денис Черников
      Опубликовано: 22.11.2012 Ответить на сообщение

      Смысл? В это время все пьяные будут и в Интернете Вы никого не увидите!))

      • blogrub
        Опубликовано: 22.11.2012 Ответить на сообщение

        Ага, зайдут увидят все летает и подумают, во перепил то

        • Денис Черников
          Опубликовано: 22.11.2012 Ответить на сообщение

          Да все сами будут летать!)

  • Сергей
    Опубликовано: 22.11.2012 Ответить на сообщение

    Библиотеки JQuery могут быть уже включены, если да, то в первом коде можно только сам скрипт «снег» включить и всё. Себе прикрутил снежок, прикольно.
    Спасибо Денис.

    • Денис Черников
      Опубликовано: 22.11.2012 Ответить на сообщение

      Отлично, Сергей! Там второй нужно оставить, который в хэдере, а первый можно удалить. Я его специально добавил, чтобы люди с не подключенной библиотекой не говорили, что скрипт плохой!

  • Svetlana
    Опубликовано: 23.11.2012 Ответить на сообщение

    Снег!!! Только и видишь его на сайтах, когда же у нас в городе снег выпадет??? Буду к вам, Денис, за снегом ходить...

    • Денис Черников
      Опубликовано: 23.11.2012 Ответить на сообщение

      Приходите Светлана, в снежки поиграем или снегурку вылепим!))

  • Надежда Пинчук
    Опубликовано: 23.11.2012 Ответить на сообщение

    Денис, ваш блог просто находка. Уже многому научилась по вашим статьям.Спасибо огромное.

    • Денис Черников
      Опубликовано: 23.11.2012 Ответить на сообщение

      Пожалуйста, Надежда! Стараюсь, как могу! Чем больше будет таких отзывов, тем сильнее будут старания! Зовите всех кого найдёте!))))

  • Томский школьник
    Опубликовано: 26.11.2012 Ответить на сообщение

    Думаю воспользуюсь. Только в декабре, сейчас думаю рановато еще) Хотя блог уже украсил)

    • Денис Черников
      Опубликовано: 26.11.2012 Ответить на сообщение

      Конечно, пользуйтесь! Мне кажется, что уже в самый раз!

      • Томский школьник
        Опубликовано: 26.11.2012 Ответить на сообщение

        Ну хорошо уговорили) Завтра установлю. Кстати забегайте ко мне на блог. Помню как то один раз заходили.

        • Денис Черников
          Опубликовано: 26.11.2012 Ответить на сообщение

          Спасибо, за приглашение. Как нибудь загляну!

  • Елена
    Опубликовано: 03.12.2012 Ответить на сообщение

    Денис, у меня та же проблема, что и с кнопкой «наверх». При установке снежинок на главной странице перестает работать слайдер и анонсы первых 3-х статей налезают друг на друга. Снежинки тоже не появились.
    После удаления первого скрипта на сайте все восстановилось, наверное, с ним что-то конфликтует.
    Удалила все, снежинок, все равно, нет ((.

    • Денис Черников
      Опубликовано: 03.12.2012 Ответить на сообщение

      Со снежинками, тоже самое. Я не вижу, что и куда Вы устанавливаете. У всех работает.

  • Сергей
    Опубликовано: 24.12.2012 Ответить на сообщение

    Хорошая статья, перед Новым Годом обязательно воспользуюсь, спасибо!

    • Денис Черников
      Опубликовано: 24.12.2012 Ответить на сообщение

      Рад что понравилось! Поторопитесь, он уже близко!

  • allemiko
    Опубликовано: 25.12.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 25.12.2012 Ответить на сообщение

      Спасибо, за положительный отзыв! Без снега зимы не бывает!

  • Максим
    Опубликовано: 16.02.2013 Ответить на сообщение

    Денис спосибо большое! Установил снег на одном из своих блогов!!вроде пока работает на ура!Очень интересная штучка декарация сайту).

  • Александр
    Опубликовано: 04.12.2013 Ответить на сообщение

    После установки снега перестал работать плагин лайт бокс и пропала стрелка вверх. Подскажите что может быть. Зарание спасибо!

    • Денис Черников
      Опубликовано: 04.12.2013 Ответить на сообщение

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

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.