Падающий снег на jQuery или html шаблон Новогодней поздравительной открытки. Падающий снег на jQuery или html шаблон Новогодней поздравительной открытки Заливаем изображение фона

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

Но, как говорится, время не стоит на месте. Буквально вчера на просторах нашего всезнающего Интернета мне случайно попался отличный скрипт и теперь я знаю еще один способ, как установить падающие снежинки на сайт. Ради спортивного интереса я опробовал его в деле. Результаты Вы видите сами. Скрипт не тормозит скорость загрузки страниц сайта, практически подходит к любой CMS, не напрягает читателей — просто создает хорошее настроение!

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

И всё! Больше никаких папок с файлами или отдельных файлов. Достаточно установить данный код сразу после открывающего тега и новогоднее настроение уже с Вами.

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

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

Из подробностей могу добавить, что в скрипт «вшиты» 40 снежинок с максимальным размером до 35px. И я тоже считаю, что это оптимальные значения. К сожалению, я так и не смог выяснить имя автора найденной публикации для того, чтобы сказать ему большое спасибо за проделанную работу.

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

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

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

Украсить свой сайт перед Рождеством и Новым годом очень просто. Установите скрипт и на сайте появятся красивые снежинки.

Как установить снежинки на свой сайт

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

Перед закрывающим тегом вставьте код:

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

Скачать скрипт

После нажатия на одну из кнопок ниже, появится ссылка для скачивания файла.

Вебмастера украшают сайты

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

Главное не перестараться

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

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

Как украсить сайт перед Новым годом

Наиболее простым и безболезненным изменением может быть вариант использования эффекта падающих снежинок.

Статья по теме: Как подключить Яндекс.Спеллер к WordPress

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

Первая версия скрипта со снежинками. Эту версию скрипта не скачивайте - она сырая.

Скрипт «Падающие снежинки»

Чем же он отличается от других скриптов, генерирующих снежинки? Дело в том, что падающие снежинки не являются изображениями. Падающие снежинки - это обычные символы шрифта (звездочки «*») . То есть форма снежинок зависит от заданного в настройках шрифта. Вы можете выбрать любой другой стандартный шрифт и тогда снежинки будут другими.

Кроме формы снежинок, можно еще задавать цвет, размер, количество и скорость падения.

Настройки скрипта: цвет, форма, размер и количество снежинок // Set the number of snowflakes (more than 30 - 40 not recommended) var snowmax=35 // Set the colors for the snow. Add as many colors as you like var snowcolor=new Array("#b9dff5","#b9dff5","#b9dff5","#b9dff5","#b9dff5") // Set the fonts, that create the snowflakes. Add as many fonts as you like var snowtype=new Array("Times") // Set the letter that creates your snowflake (recommended: *) var snowletter="*" // Set the speed of sinking (recommended values range from 0.3 to 2) var sinkspeed=0.6 // Set the maximum-size of your snowflakes var snowmaxsize=35 // Set the minimal-size of your snowflakes var snowminsize=8 // Set the snowing-zone // Set 1 for all-over-snowing, set 2 for left-side-snowing // Set 3 for center-snowing, set 4 for right-side-snowing var snowingzone=1

Скрипт буржуйский и пожтому комментарии на английском языке. Но программерам английский язык - родной. Надеюсь с этим сложностей не возникнет.

Известные проблемы со скриптом

Оригинальный скрипт не лишен недостатков. Но все они уже успешно устранены.

На широкоформатном мониторе снежинки не заполняли всю доступную область. В ява скрипте я не особо разбираюсь. Поэтому исправить недочет в этом скрипте я попросил своего талантливого друга Дениса Балыкина, известного в сети под ником BaDeVlad. Он быстро разобрался в чужом коде и отредактировал его как надо.

У скрипта был очень серьезный недочет. Скрипт не работал не только в Doctype Strict , но и вообще не поддерживал веб-стандарты . Я перепроповал все доктайпы, - ни один из них не позволял появлению осадков в виде снега. Позже, в комментариях, Алексей Юдин дал рецепт от излечения этого тяжелого недуга. Нужно было указать единицы измерения, в конце некоторых строк добавив +"px";

Как подключить скрипт со снежинками на свой хостинг

Скачайте скрипт и разместите на своем хостинге.

Укажите место, где находится скрипт следующей конструкцией

Например, если вы положите скрипт в папку js, которая находится в корне вашего сайта, тогда подключение скрипта будет таким: добавьте вот эту строку в шаблон сайта, например перед тегом body:

1500) { clearInterval(t); document.getElementsByTagName("body").removeChild(flex); } }, 45 + Math.random() * 20); }; snow.storm = function(){ var t = setInterval(function(){ snow.snowflex(); }, 500); }; //snow.storm(); var fog = {}; fog.draw = function(ctx, x, y){ ctx.fillStyle = "rgba(255, 255, 255, " + Math.random() + ")"; ctx.arc(x, y, 10,0,Math.PI*2,true); ctx.closePath(); ctx.fill(); }; fog.start = function(){ var ctx = document.getElementById("canvas").getContext("2d"); var x = 0; var y = 0; var t = setInterval(function(){ x = 300 + 300*Math.sin(x); y = 300 + 300* -Math.cos(x); x += 2; fog.draw(ctx, x, y); }, 100); }; //fog.start();

Подключаем js-файл в :

4. Вставляем html код

Ну и осталось самое главное - вставить html код падающего снега в любое места в :

❄

Если вы все сделали правильно, то у Вас на сайте начнет падать снег.

Подключение фоновой картинки, большого заголовка и падающих снежинок

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

1. Скачиваем архив и его разархивировируем 2. Подключаем библиотеку jQuery

Обязательно подключить библиотеку jQuery (не обязательно, если у Вас уже подключена эта библиотека). Подключается она так: между тегами и вставляете следующий код:

3. Подключаем шрифт "Lobster"

Аналогично подключению бибилиотеки jQuery, подключаем шрифт для нашей надписи "С Новым годом":

Естественно, если Вам не нужна эта надпись и шрифт, вы можете его не подключать, но тогда и в css уберите у атрибута H1 "font-family: "Lobster", cursive;", или замените его на свой шрифт

4. Подключаем стили

Вариант А. Вставьте css-код в свой css файл. Вот код:

Img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } h1 { font-family: "Lobster", cursive; color: #FFF; font-size: 90px; text-align: center; line-height: 95px; font-weight: normal; margin-top: 300px; text-shadow: 5px 5px 5px #000; } @media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } } html, body { font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 16px; padding: 0; margin: 0; color: #333; } .bar { background-color: #111; color: #f0f0f0; box-shadow: 0px 0px 2px #333; line-height: 25px; padding: 0px 20px; opacity: 0.7; } .bar:hover { opacity: 1; } .bar a { color: #DDD; } .bar a:hover { color: #FFFFFF; } a { color: #FFFFFF; text-decoration: none; } a:hover { color: #CCC; } #canvas { border: 1px solid black; position: absolute; z-index: 10000; } #flake { color: #fff; position: absolute; font-size: 25px; top: -50px; } #page { position: relative; }

Вариант B. Также можно создать отдельный файл, например snow.css и вставить этот же код туда, правда его надо будет подключить в head следующим образом:

5. Подключаем скрипт падающего снега

Вариант А. Для этого нам нужно вставить в самый низ сайта (до закрытия ) следующий javascript-код:

Вариант B. Также как и с css-кодом, javascript можно вынести в отдельный файл и также его назвать snow.js и подключить его в head:

6. Заливаем изображение фона

Залить картинку bg.jpg из архива в корень Вашего сайта

7. Вставляем html код

Ну и осталось самое главное - вставить html код падающего снега:

С Новым годом! ❄

Скрипт падающего снега успешно подключен. Обязательно посмотрите его в работе. Всего доброго!

Украшаем свой блог к Новому году. Предлагаю вашему вниманию старый но не забытый и любимый блогерами виджет ПАДАЮЩИЕ СНЕЖИНКИ.

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

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

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

Как установить гаджет « Падающие снежинки»

Заходим Административная панель Blogger > Дизайн > Добавить гаджет HTML/JavaScript . В окно вставляем код.

После того, как вставили код в гаджет, желательно поднять его как можно выше. Сделать это не трудно, захватываем левой кнопкой мышки гаджет HTML/JavaScript и тащим вверх под шаблон и отпускаем, не получилось с первого раза, повторите еще раз.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Обратите внимание, если у вас уже есть подключенная библиотека 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; (отступ слева).

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

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

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

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

Последние

Это нужно знать