ГлавнаяДизайн блога › Как сделать Снегопад на Сайте с помощью JQuery?


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


Снег на сайтХорошего настроения, всем читателям — 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  и поменяйте соответствующие значения:

 

Снегопад на сайте

 

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

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

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

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

 

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




Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:




27 комментариевА что думаете Вы?

  1. Александр Красильный

    Здравствуйте Денис. Украсить блог к Новому Году — это обязательная процедура почти для любого блоггера.

    Я вот тоже занялся украшениями и слегка переделал шапку, фон и кнопку «вверх». Вышло даже ничего так...

    Вот задумываюсь по поводу снега. Когда-то использовал плагин на старом сайте, но он меня особо не впечатлил. А Ваш вариант со снегом при помощи jquery выглядит заманчивым!

    Кстати, друзья, почитайте обязательно интервью, оно вышло очень интересным и занимательным! =)

    И на последок... Денис в последнее время Ваш блог иногда прилично подтормаживает при загрузке. Такое ощущение, что Вас пытается кто-то «досить»...

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Александр Красильный ответил:

    Доброе утро! Кусков кода вроде как не замечал. Тормоза заметил кстати после установки слайдера...

    Что касается снега. Все таки я решился поставить у себя Ваш вариант снегопада, но столкнулся с одной проблемой. Ранее была установлена кнопка «вверх» используя так же Ваш вариант с jquery. Так вот после установки снегопада, у меня пропадает кнопка «вверх».

    Методом «тыка» выяснил, что, скорее всего сбой дает первая часть скрипта, которая пишется до закрывающегося тега /head.

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

    [Ответить]

    Денис Черников ответил:

    Доброе, Александр! Возможно тормоза не от доса, а от прироста трафика и слайдера. Видимо нужно тарифный план на хосте менять или на VPS переходить!

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

    [Ответить]

  2. blogrub

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    blogrub ответил:

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  3. Сергей

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

    Спасибо Денис.

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  4. Svetlana

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  5. Надежда Пинчук

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  6. Томский школьник

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Томский школьник ответил:

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  7. Елена

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

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

    Удалила все, снежинок, все равно, нет ((.

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  8. Сергей

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  9. allemiko

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  10. Максим

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

    [Ответить]

  11. Александр

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

Оставить комментарий!

Вверх