Как сделать падающий снег на сайте
Украшать свои сайты и блоги в период Новогодних и Рождественских праздников дело хорошее. Приятно как-то даже такие сайты посещать :).
Мой блог не исключение, он тоже преобразился на период этих зимних праздников. Вы наверняка заметили новый логотип, которым я никак не могу похвастаться написав о нем пост, он в данный момент украшен елочкой и припорошен снегом.
Вчера я добавил еще одно украшение в блог, которое возможно придется вам по душе — это падающий снег.
Раньше я ни разу не устанавливал скрипты падающих снежинок на сайт, потому как видел сие чудо на других сайтах и скажу честно — мне не очень нравилось, а иногда даже раздражало.
Совсем недавно в google появилась новая фишка. Я о ней сообщал в посте о статичной кнопке G+ — это падающий снег и замораживающийся экран, который потом можно стирать пальцем. Попробуйте, введите в поисковик запрос “let it snow”.
Мне очень понравился такой подход по двум причинам:
1. Выглядит очень симпатично;
2. Снег начинает падать лишь по запросу пользователя.
Вот такое украшение по мне. Но реализовать заморозку экрана я не смогу — не программист, хочу заказать программисту, но не уверен что поспеет к этому Новому году. А вот с падающим снегом в стиле гугла и «по заказу» посетителя — это можно :). Правда опять же не своими силами, а с помощью одного хорошего «иносранца» :), но не суть.
Прежде чем я познакомлю вас со снегом в моем блоге, давайте сначала коротенько вспомним несколько плагинов для wordpress, которые генерируют не плохой снег для сайта.
Новогодние плагины падающего снега для WordPress
Очень даже хороший плагин. Не мало разного рода настроек: скорость анимации, цвет падающего снега, размер хлопьев, количество одновременно падающих снежинок и др. Есть даже что-то вроде замораживания, но я не смог его запустить :(.
На первый взгляд снег на сайте выглядит вроде не плохо, попробуйте, возможно вам понравится.
Но мне этот плагин не подошел. Во-первых я не очень люблю плагины и пользуюсь ими только при острой необходимости, а во-вторых снег начинает «валить» сразу после загрузки страницы (второй пункт помните?) и иной раз отвлекает от основного контента сайта (мелькают мухи перед глазами, блин:)), да и снежинки все одного размера.
Говорят хороший плагин. У меня почему-то не запустился, хотя установился нормально, а снега нет :). Попробуйте, может у вас получится лучше.
Этот плагин делает точно такой же снег, как сейчас у меня. Настроек никаких особо нет, просто — установили и пошел снег. Хотя если захотеть, то кое-что настроить все же можно (цвета, скорость и т.д.) в редакторе плагинов, т.е. редактируя сам файл плагина.
Все бы хорошо, но минусы те же, что и раньше: это все-таки плагин, хоть и не «тяжелый», и снег идет постоянно, даже если пользователю он в общем-то не нужен.
Этот плагин можно назвать универсальным праздничным плагином. По мимо собственно снега этот скрипт может и шарики надувные пускать и листочки всякие :).
Очень интересный плагин…даже захотелось установить. Но…, есть у меня уже свой снег :).
Снег на сайт по запросу пользователя
Вот собственно то решение, которое на мой взгляд лучше всего из всех перечисленных выше. Конечно здесь не все так круто, как в том же «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; (отступ слева).
Само собой вы можете прописать совершенно другие стили и использовать другую кнопку. Я лишь привел пример, который сейчас работает у меня в блоге.
Кстати, попробуйте. Кнопка находится в шапке блога, рядом с формой поиска:
Удачи Вам друзья! С наступающим Новым годом и Рождеством!
Сладкое на сегодня: Приятная мелодия, приятная песня, приятный Рождественский клип. Наслаждайтесь 🙂
Но это ж надо еще додуматься кнопку нажать. Так неинтересно. Если б не прочла пост, я бы снежинку в шапке не стала бы и трогать — думаю, большинство согласится. А за плагины спасибо — с шариками интересный, попробую у себя.
А зачем додумываться? Вы же не на снег в блоги заходите посмотреть, а читать. А тот кому все-таки станет интересно, что это за кнопка — сможет об этом узнать.
Кроме всего прочего, кнопку можно расположить где угодно, как угодно, какую угодно. В итоге можно сделать так, что и додумываться не придется, это в случае, если вы хотите таки чтобы каждый посетитель видел ее и тыкал. У меня такой задачи не было.
А мне падающий снег после нажатия на снежинку понравился. Прикольно.
У нас в декабре +3-1, снега не дождемся.
Не уверен, что смогу подобное реализовать, но подумаю.
А интересно есть ли скрипт для Друпала или только для Ворд пресс? У меня все сайты на движке Друпала так хочется на 14 января сделать приятное моим гостям.
Этот скрипт универсален. Его можно установить даже на статичную html страничку.
Да, именно об этом я и говорил в посте, что «летающие мухи» очень мешают. И именно по этому у меня в блоге снег не падает, пока сам посетитель того не захочет.
А можно сделать ограничения по высоте например снег идет только в хедере что надо переписать в скрипте для этого? буду благодарен
Snow, balloons and more — Хороший плагин! Мне он понравился так, как сайт загружается быстро. Один мину снег постоянно не идёт(( . Через пару минут он перестаёт идти (.
Мне нравиться снежок, но плагины устарели, стоит ли рисковать с их установкой на блог?
Желательно пользоваться более свежими аналогами, которые наверняка существуют, но если не найдете, а очень хочется, то пользуйтесь тем, что есть.
очень понравился у вас на блоге пункт подписания на рассылку с социальными кнопочками
Спасибо! Я его выкладывал здесь: http://pervushin.com/feedburner-form-social-button-pervushin.html
Благодарю за быстрый ответ! Это приятно. У вас много информации, всю сразу не осилю, поэтому записываюсь в ваши читатели.
Очень рад 😉
Сергей если вам не трудно можете побдробно обьяснить что делать.Сайт делал на Okis
Спасибо за статью, поставил себе плагин Snow, balloons and more. Вроде нормальный))) Только вот что то снежинки у меня в Мозилле притормаживают, а в Хроме нормально все плавно падают. Не подскажете в чем беда?