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

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

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

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

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

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

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

позаботится об украшение сайта . Заходишь на сайт, а там, падает снег или снежинки , чувствуется дух праздника и сразу создаётся хорошее праздничное настроение. Хотя снег виртуальный, но всё равно, радует. Согласны? Ну конечно. Тогда, я вам сегодня подскажу - Как добавить, включить, установить снег или снежинки на сайте .

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

Плагин Snow Flurry - идёт снег на сайте WordPress

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

Супер плагин WFS Let It Snow - добавляет снегопад на вашем сайте

Плагин WFS Let It Snow

Отличный плагин на JQuery, с помощью его можно устроить просто настоящий снегопад на сайте, то есть, белую мглу. В настройках можно выбрать тип снегопада из четырех вариантов: слабый, средний, тяжёлый и белая мгла. А также, сделать падающие снежинки только на главной странице или на всех; включить/отключить снег; минимальный и максимальный размер снежинок; минимальная и максимальная скорость хлопьев; включите тени (для веб-сайтов с белым фоном):

Настройка WFS Let It Snow Plugin

Здесь, также после установки и активации плагина в разделе настройка появится подраздел Let It Snow, нажимаете и настраиваете. Идем далее.

Tribulant Snow Storm - метель на вашем сайте

Этот плагин мне понравился больше, даже не знаю почему, может из за направления снегопада, метель из снега реагирует на движение указателя мышки (если включить такую опцию). Прикольно, посетителям понравится. Ещё из настроек: цвет снега; количество хлопьев; интервал анимации; поддержка мобильных; снег таит внизу экрана и эффект мерцания:

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

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

Скрипт падающего снега на сайт

Скрипт падающих снежинок подойдёт для любого сайта или блога на любой платформе. Только придётся повозиться (скрипт надо загрузить на свой хостинг), можно использовать свой хостинг где расположен ваш сайт, а можно воспользоваться сторонним, например: бесплатный и Диск Google. И так вот код скрипта:

/* Snow Fall 1 - no images - Java Script Visit http://rainbow.arch.scriptmania.com/scripts/ for this script and many more */ // Set the number of snowflakes (more than 30 - 400 not recommended) var snowmax=100 // 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 /////////////////////////////////////////////////////////////////////////// // CONFIGURATION ENDS HERE /////////////////////////////////////////////////////////////////////////// // Do not edit below this line var snow=new Array() var marginbottom var marginright var timer var i_snow=0 var x_mv=new Array(); var crds=new Array(); var lftrght=new Array(); var browserinfos=navigator.userAgent var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/) var ns6=document.getElementById&&!document.all var opera=browserinfos.match(/Opera/) var browserok=ie5||ns6||opera function randommaker(range) { rand=Math.floor(range*Math.random()) return rand } function initsnow() { if (ie5 || opera) { marginbottom = document.body.scrollHeight marginright = document.body.clientWidth-15 } else if (ns6) { marginbottom = document.body.scrollHeight marginright = window.innerWidth-15 } var snowsizerange=snowmaxsize-snowminsize for (i=0;i(marginright-3*lftrght[i])){ if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)} if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)} if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4} if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2} snow[i].posy=0 } } var timer=setTimeout("movesnow()",50) } for (i=0;i height - 89){ Нижняя граница видимости снежинок тем дальше, чем меньше цифра, вычитаемая из высоты. Если же, вместо указанного числа "89" , поставить, скажем - "49" , то снежинки будут, "покружившись" на рисунке примера, исчезать уже за его разделительной полосой .

Количество снежинок - устанавливается в 14-ой строчке js-кода скрипта, в выражении: var col = Math.round(height/25); Количество снежинок тем больше, чем меньше число, прописанное в этом выражении.

Скорость снежинок - настраивается в 50-ой строчке кода, в выражении: setTimeout("snow()", 40); Скорость снежинок тем больше, чем меньше число задержки.

** К примеру , указав этим числам достаточно маленькое значение, скажем - "5" , можно устроить "настоящий снегопад" на странице своего сайта. "Буран"!

И кроме этого!

Не забывать(!) в первой строчке кода: var imgsrc="image/snow/snow.gif"; указывать путь к нужной картинке снежинки.

Кстати! Можно спокойно указывать ЛЮБУЮ КАРТИНКУ из этой папки. Ради пробы я брал и прописывал картинки: snow.gif ÷ snow6.gif (*интересно; они все разные ), абсолютно БЕЗ каких-либо изменений в коде снега .

Чтобы снежинки равномерно распределялись по всей высоте страницы, ВАЖНО(!) , где вставлять JavaScript-код. Лучше всего, чтобы у страницы не "дёргался" нижний скролл, вставить код скрипта снега в самый конец страницы . ПРОВЕРЕНО!
**И ещё! В тэг код скрипта НЕ ВСТАВЛЯТЬ! НЕ РАБОТАЕТ !

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

jSnow – универсальный скрипт падающего снега на jQuery

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

Демонстрация:

Согласитесь – красиво!

Для того, чтобы установить этот эффект к себе на сайт, сделайте следующее.

1. Скачайте архив jsnow.zip в конце статьи. Разархивируйте и содержимое загрузите на ваш сайт по FTP или другим удобным для вас способом.

К сожалению, с новыми версиями jQuery скрипт не работает, так что довольствуемся тем, что есть.

3. Перед закрывающим тегом подключаете скрипты:

$(document).ready(function() { $("body").jSnow({ vSize: 100, // Размер области flakes: 30, // Количество снежинок flakeColor: ["#fff"], // Цвет flakeMinSize: 10, // Минимальный размер снежинки flakeMaxSize: 20, // Максимальный размер снежинки fallingSpeedMin: 1, // Минимальная скорость снежинки fallingSpeedMax: 2, // Максимальная скорость снежинки flakeCode:["."] // Вид снежинки }); });

В этом коде настраивается размер снежинок, высота занимаемой ими области, цвет и другие прокомментированные параметры.

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

FlakeCode:["*"] // Вид снежинки

Или же связку круглого снега и звезд:

FlakeCode:[".", "*"] // Вид снежинки

А также любой другой символ (и даже знак доллара – $).

Скрипт отлично подходит для оформления верха сайта, не перекрывая при этом основной контент.

Snowstorm – умный скрипт падающего снега на JavaScript

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

Демонстрация:

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

1. Скачать архив snowstorm.zip в конце статьи. Разархивировать и содержимое загрузить на ваш сайт удобным для вас способом.

window.onload = function() { snowStorm.snowColor = "#fff"; // Цвет снежинок snowStorm.flakesMaxActive = 100; // Максимальное количество видимых снежинок snowStorm.followMouse = true; // true - гоняться за курсором, false - нет snowStorm.snowCharacter = "."; // Вид снежинки };

По необходимости вносите изменения в анимацию скрипта.

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

Snowfall – эффект падающего снега с сугробами на jQuery

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

Демонстрация:

Установка этого эффекта немного дольше остальных.

1. Если на вашем сайте отсутствует библиотека jQuery, подключите ее в секцию HEAD :

3. Открывающему тегу присвойте класс «darkBg »:

4. Перед закрывающим тегом подключите скрипты:

$(document).ready(function() { document.body.className = "darkBg"; $(document).snowfall({ collection: ".collectonme", flakeCount: 200 // Количество снежинок }); });

5. И завершающим этапом присвойте класс тем элементам, над которыми должны образовываться сугробы:

Class="collectonme"

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

Collection: ".collectonme",

Это обязательное действие, иначе снег на вашем сайте не будет падать.

Отличный скрипт, именно его мы раньше использовали на своем сайте.

Плавный многоуровневый эффект падающего снега на CSS3

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

Демонстрация:

Волшебно, не так ли?

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

1. Скачайте архив snow_img.zip в конце статьи. Разархивируйте и содержимое загрузите на ваш сайт по FTP или через файловый менеджер хостинга.

2. В ваш файл стилей вставьте (желательно в самый низ):

SnowContainer { width: 100%; height: 100%; position: absolute; top: 0; left:0; z-index: -1; } #snow { width: 100%; height: 100%; background-image: url("/snow/snow_1.png"), url("/snow/snow_2.png"), url("/snow/snow_3.png"); -webkit-animation: snow 20s linear infinite; -moz-animation: snow 20s linear infinite; -ms-animation: snow 20s linear infinite; animation: snow 20s linear infinite; } @keyframes snow { 0% { background-position: 0px 0px, 0px 0px, 0px 0px; } 100% { background-position: 500px 1000px, 400px 400px, 300px 300px; } } @-moz-keyframes snow { 0% { background-position: 0px 0px, 0px 0px, 0px 0px; } 100% { background-position: 500px 1000px, 400px 400px, 300px 300px; } } @-webkit-keyframes snow { 0% { background-position: 0px 0px, 0px 0px, 0px 0px; } 100% { background-position: 500px 1000px, 400px 400px, 300px 300px; } } @-ms-keyframes snow { 0% { background-position: 0px 0px, 0px 0px, 0px 0px; } 100% { background-position: 500px 1000px, 400px 400px, 300px 300px; } }

После чего сохраните все изменения.

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