Как сделать падающий снег на сайте

Украшать свои сайты и блоги в период Новогодних и Рождественских праздников дело хорошее. Приятно как-то даже такие сайты посещать :).

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

Вчера я добавил еще одно украшение в блог, которое возможно придется вам по душе — это падающий снег.

Универсальный скрипт падающего снега на сайт

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

Совсем недавно в google появилась новая фишка. Я о ней сообщал в посте о статичной кнопке G+ — это падающий снег и замораживающийся экран, который потом можно стирать пальцем. Попробуйте, введите в поисковик запрос “let it snow”.

Мне очень понравился такой подход по двум причинам:

1. Выглядит очень симпатично;

2. Снег начинает падать лишь по запросу пользователя.

Вот такое украшение по мне. Но реализовать заморозку экрана я не смогу — не программист, хочу заказать программисту, но не уверен что поспеет к этому Новому году. А вот с падающим снегом в стиле гугла и «по заказу» посетителя — это можно :). Правда опять же не своими силами, а с помощью одного хорошего «иносранца» :), но не суть.

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

Новогодние плагины падающего снега для WordPress

Let It Snow!

Очень даже хороший плагин. Не мало разного рода настроек: скорость анимации, цвет падающего снега, размер хлопьев, количество одновременно падающих снежинок и др. Есть даже что-то вроде замораживания, но я не смог его запустить :(.

Плагин для wordpress Let It Snow!

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

Но мне этот плагин не подошел. Во-первых я не очень люблю плагины и пользуюсь ими только при острой необходимости, а во-вторых снег начинает «валить» сразу после загрузки страницы (второй пункт помните?) и иной раз отвлекает от основного контента сайта (мелькают мухи перед глазами, блин:)), да и снежинки все одного размера.

Snow Storm

Говорят хороший плагин. У меня почему-то не запустился, хотя установился нормально, а снега нет :). Попробуйте, может у вас получится лучше.

Xmas Snow

Этот плагин делает точно такой же снег, как сейчас у меня. Настроек никаких особо нет, просто — установили и пошел снег. Хотя если захотеть, то кое-что настроить все же можно (цвета, скорость и т.д.) в редакторе плагинов, т.е. редактируя сам файл плагина.

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

Snow, balloons and more

Этот плагин можно назвать универсальным праздничным плагином. По мимо собственно снега этот скрипт может и шарики надувные пускать и листочки всякие :).

Wordpress плагин Snow, balloons and more

Очень интересный плагин…даже захотелось установить. Но…, есть у меня уже свой снег :).

Снег на сайт по запросу пользователя

Вот собственно то решение, которое на мой взгляд лучше всего из всех перечисленных выше. Конечно здесь не все так круто, как в том же «Snow, balloons and more», но проще не значит хуже.

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

Для начала скачайте эти файлы и залейте на ваш сервер в нужную папку: скрипт снега, библиотека jquery (если вдруг она у вас не подключена), кнопка снежинки. Кнопка, кстати, вот так выглядит:

Кнопка-снежинка

Затем между тегами <head></head> пропишите путь к скриптам:

<script type='text/javascript' src='путь/jquery.min.js?ver=1.7'></script>
<script src="путь/jquery.letsinsnow.js"></script>

Обратите внимание, если у вас уже есть подключенная библиотека jquery, то повторно подключать ее совсем не требуется. Тогда просто пропишите путь к jquery.letsinsnow.js.

В файле jquery.letsinsnow.js в строке 15 (‘color’ : ‘#79B3EC’,) можно изменить цвет снежинок. Остальное думаю можно оставить по-умолчанию ;).

Осталось лишь кнопку на сайт добавить, по клику на которую повалит снег. Для этого необходимо выполнить пару легких шагов:

1. Разместить код кнопки в нужном месте сайта:

<input name="snowbutton" TYPE="button" onclick="$('body').snowFall();" title="Снежинки!" class="snowbutton" />

У меня кнопка размещена в шапке блога. Потому код я добавлял в файл header.php своего wordpress шаблона.

2. Добавить в файл стилей (обычно это style.css) следующий стиль:

.snowbutton {
 background:url("snowflake.png") 100% no-repeat;
 width: 64px;
 height: 64px;
 overflow:visible;
 margin-top:80px;
 margin-left:740px;
 cursor:pointer;
 border:0;
 }

Здесь вам понадобится откорректировать пару параметров:

— путь к изображению кнопки: background:url(«snowflake.png») 100% no-repeat;.

— место расположения кнопки на сайте: margin-top:80px; (отступ сверху экрана) и margin-left:740px; (отступ слева).

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

Кстати, попробуйте. Кнопка находится в шапке блога, рядом с формой поиска:

Кнопка снега для сайта

Удачи Вам друзья! С наступающим Новым годом и Рождеством!

Сладкое на сегодня: Приятная мелодия, приятная песня, приятный Рождественский клип. Наслаждайтесь 🙂


Комментарии

17 на запись "Как сделать падающий снег на сайте"
  1. Ledi Tech says:

    Но это ж надо еще додуматься кнопку нажать. Так неинтересно. Если б не прочла пост, я бы снежинку в шапке не стала бы и трогать — думаю, большинство согласится. А за плагины спасибо — с шариками интересный, попробую у себя.

    • А зачем додумываться? Вы же не на снег в блоги заходите посмотреть, а читать. А тот кому все-таки станет интересно, что это за кнопка — сможет об этом узнать. 

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

  2. Аноним says:

    А мне падающий снег после нажатия на снежинку понравился. Прикольно.
    У нас в декабре +3-1, снега не дождемся.

  3. Не уверен, что смогу подобное реализовать, но подумаю.

  4. А интересно есть ли скрипт для Друпала или только для Ворд пресс? У меня все сайты на движке Друпала так хочется на 14 января сделать приятное моим  гостям.

  5. Да, именно об этом я и говорил в посте, что «летающие мухи» очень мешают. И именно по этому у меня в блоге снег не падает, пока сам посетитель того не захочет.

  6. Дмитрий says:

    А можно сделать ограничения по высоте например снег идет только в хедере что надо переписать в скрипте для этого? буду благодарен

  7. Виктор says:

    Snow, balloons and more — Хороший плагин! Мне он понравился так, как сайт загружается быстро. Один мину снег постоянно не идёт(( . Через пару минут он перестаёт идти (.

  8. Людмила Плехова says:

    Мне нравиться снежок, но плагины устарели, стоит ли рисковать с их установкой на блог?

  9. Людмила Плехова says:

    очень понравился у вас на блоге пункт подписания на рассылку с социальными кнопочками

  10. Dimitrii says:

    Сергей если вам не трудно можете побдробно обьяснить что делать.Сайт делал на Okis

  11. Виктор says:

    Спасибо за статью, поставил себе плагин Snow, balloons and more. Вроде нормальный))) Только вот что то снежинки у меня в Мозилле притормаживают, а в Хроме нормально все плавно падают. Не подскажете в чем беда?

Спасибо, что оставили свой комментарий

banner