Как сделать падающий снег на сайте
Украшать свои сайты и блоги в период Новогодних и Рождественских праздников дело хорошее. Приятно как-то даже такие сайты посещать :).
Мой блог не исключение, он тоже преобразился на период этих зимних праздников. Вы наверняка заметили новый логотип, которым я никак не могу похвастаться написав о нем пост, он в данный момент украшен елочкой и припорошен снегом.
Вчера я добавил еще одно украшение в блог, которое возможно придется вам по душе — это падающий снег.
Раньше я ни разу не устанавливал скрипты падающих снежинок на сайт, потому как видел сие чудо на других сайтах и скажу честно — мне не очень нравилось, а иногда даже раздражало.
Совсем недавно в google появилась новая фишка. Я о ней сообщал в посте о статичной кнопке G+ — это падающий снег и замораживающийся экран, который потом можно стирать пальцем. Попробуйте, введите в поисковик запрос “let it snow”.
Мне очень понравился такой подход по двум причинам:
1 . Выглядит очень симпатично;
2 . Снег начинает падать лишь по запросу пользователя.
Вот такое украшение по мне. Но реализовать заморозку экрана я не смогу — не программист, хочу заказать программисту, но не уверен что поспеет к этому Новому году. А вот с падающим снегом в стиле гугла и «по заказу» посетителя — это можно :). Правда опять же не своими силами, а с помощью одного хорошего «иносранца» :), но не суть.
Прежде чем я познакомлю вас со снегом в моем блоге, давайте сначала коротенько вспомним несколько плагинов для wordpress, которые генерируют не плохой снег для сайта.
Новогодние плагины падающего снега для WordPress
Очень даже хороший плагин. Не мало разного рода настроек: скорость анимации, цвет падающего снега, размер хлопьев, количество одновременно падающих снежинок и др. Есть даже что-то вроде замораживания, но я не смог его запустить :(.
На первый взгляд снег на сайте выглядит вроде не плохо, попробуйте, возможно вам понравится.
Но мне этот плагин не подошел. Во-первых я не очень люблю плагины и пользуюсь ими только при острой необходимости, а во-вторых снег начинает «валить» сразу после загрузки страницы (второй пункт помните?) и иной раз отвлекает от основного контента сайта (мелькают мухи перед глазами, блин:)), да и снежинки все одного размера.
Говорят хороший плагин. У меня почему-то не запустился, хотя установился нормально, а снега нет :). Попробуйте, может у вас получится лучше.
Этот плагин делает точно такой же снег, как сейчас у меня. Настроек никаких особо нет, просто — установили и пошел снег. Хотя если захотеть, то кое-что настроить все же можно (цвета, скорость и т.д.) в редакторе плагинов, т.е. редактируя сам файл плагина.
Все бы хорошо, но минусы те же, что и раньше: это все-таки плагин, хоть и не «тяжелый», и снег идет постоянно, даже если пользователю он в общем-то не нужен.
Этот плагин можно назвать универсальным праздничным плагином. По мимо собственно снега этот скрипт может и шарики надувные пускать и листочки всякие :).
Очень интересный плагин…даже захотелось установить. Но…, есть у меня уже свой снег :).
Снег на сайт по запросу пользователя
Вот собственно то решение, которое на мой взгляд лучше всего из всех перечисленных выше. Конечно здесь не все так круто, как в том же «Snow, balloons and more», но проще не значит хуже.
Самый главный плюс этого скрипта — это «снег по заказу». Снег не пойдет сам по себе, его надо будет вызвать нажатием кнопки. Таким образом посетитель не будет напрягаться по поводу бесконечно мешающих читать белых хлопьев на экране. Если он захочет снега, он его увидит.
Для начала скачайте эти файлы и залейте на ваш сервер в нужную папку: скрипт снега, библиотека jquery (если вдруг она у вас не подключена), кнопка снежинки. Кнопка, кстати, вот так выглядит:
Затем между тегами <head></head> пропишите путь к скриптам:
Обратите внимание, если у вас уже есть подключенная библиотека jquery, то повторно подключать ее совсем не требуется. Тогда просто пропишите путь к jquery.letsinsnow.js.
В файле jquery.letsinsnow.js в строке 15 (‘color’ : ‘#79B3EC’,) можно изменить цвет снежинок. Остальное думаю можно оставить по-умолчанию ;).
Осталось лишь кнопку на сайт добавить, по клику на которую повалит снег. Для этого необходимо выполнить пару легких шагов:
1 . Разместить код кнопки в нужном месте сайта:
У меня кнопка размещена в шапке блога. Потому код я добавлял в файл header.php своего wordpress шаблона.
2 . Добавить в файл стилей (обычно это style.css) следующий стиль:
Здесь вам понадобится откорректировать пару параметров:
— путь к изображению кнопки: background:url(«snowflake.png») 100% no-repeat;.
— место расположения кнопки на сайте: margin-top:80px; (отступ сверху экрана) и margin-left:740px; (отступ слева).
Само собой вы можете прописать совершенно другие стили и использовать другую кнопку. Я лишь привел пример, который сейчас работает у меня в блоге.
Кстати, попробуйте. Кнопка находится в шапке блога, рядом с формой поиска:
Удачи Вам друзья! С наступающим Новым годом и Рождеством!
Сладкое на сегодня: Приятная мелодия, приятная песня, приятный Рождественский клип. Наслаждайтесь 🙂