Но сначала, хотелось бы ответить на комментарии по теме , - когда выйдет следующая часть? Отвечу Вам там, что мы сейчас, как я и писал в Новогоднем поздравлении, переходим официально на видео, поэтому появиться четвертая часть уже в видеоформате, а также в сокращенном текстовом формате. Дата выхода планируется на февраль месяц этого года. А теперь, собственно, давайте поговорим о плагине SnowFall.

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

Первый шаг. HTML.

Для начала, давайте подключим необходимые библиотеки js и файлы стилей css . И так, данный плагин работает без библиотеки jquery.min.js , поэтому просто подключаем родную библиотеку плагина snowfall.min.js .

По поводу стилей, будем использовать наш стандартный файл стилей demo.css .

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

После этого создаем, собственно, и сам блочный контейнер div с идентификатором content , в котором будем запускать наш плагин падающих снежинок на сайт . Из параметров стоит учесть, что minSize задает минимальный размер снежинки 5 пикселям, а максимальный размер снежинок maxSize равен 12 пикселям. Настройте размер снежинок сами на такой, какой Вам нужен.

snowFall.snow(document.body, {round: true, minSize: 5, maxSize:12});

Второй шаг. CSS.

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

Запретив использование JavaScript, Вы не сможете видеть интересные примеры его применения!

JavaScript-эффект падающего снега

С помощью языка программирования JavaScript можно создать очень интересный эффект падающего снега на сайте.

Чтоб сделать падающий снег на своём сайте, к этой странице я подключил довольно таки длинный скрипт падающего снега , реализованный с помощью JavaScript-кода .

Если нужно добавить эффект падающего снега на сайт HTML, то вполне достаточно всего лишь настроить этот скрипт.

Скрипт снега на сайте

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

Нижняя граница видимости снежинок - прописывается в операторе if функции snow() , в 42-ой строчке кода, в выражении: if (y_pos[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-код. Лучше всего, чтобы у страницы не "дёргался" нижний скролл, вставить код скрипта снега в самый конец страницы . ПРОВЕРЕНО!
**И ещё! В тэг код скрипта НЕ ВСТАВЛЯТЬ! НЕ РАБОТАЕТ !

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

Для этого существуют специальные плагины, с помощью которых можно на праздничные дни включить падающий снег или снежинки на сайте, а для тех, кто боится модулей, есть скрипт падающего снега на сайт. Скрипт я представлю вам в самом конце поста. А пока самые простые плагины, которые обновляются и совместимы с последней версией 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 Дизайн > Добавить гаджет HTML/JavaScript . В окно вставляем код.

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

Всем привет дорогие друзья! Хоть и кончилась зима, но все равно хочу рассказать вам как создать падающие снежинки на сайте WordPress, чтобы немного вспомнить зимние деньки:-). Делать падающие снежинки мы будем с помощью скрипта и плагина.

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

Как сделать падающие снежинки WordPress с помощью плагина?

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

Итак, зайдем в раздел Плагины – Добавить Новый и установим плагин падающих снежинок для WordPress.

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

Отлично! Плагин мы установили и активировали. После этого в левой части вашей панели администратора WordPress появится раздел Super Snow.

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

Сейчас мы с вами пробежимся по основным настройкам.

Первый раздел Deactivation Safeguards (Безопасность при деактивации) – оставляем первый пункт в выпадающем списке как есть, ничего не меняем. Тем более он рекомендуемый. Здесь нас просто предупреждают, что если вы удалите плагин из общего меню, то ничего не потеряно. Если вы хотите стереть все следы пребывания плагина на сайте, то тогда должны нажать на первый вариант. Показано здесь:

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

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

Например, вы можете запускать падающие снежинки только на специфических страницах указав это с помощью специальной функции (Они приведены на странице)

Вот примеры функций:

Wp_is_mobile () && is_page ("christmas-promo" ) — если эта страница не мобильная, то показывать на странице Christmas-promo

Wp_is_mobile () && ! is_ssl () – не показывать если это не мобильное устройство и не защищенный протокол https и SSl

Wp_is_mobile () && time () >= strtotime ("2015-12-01" ) && time () подключаем наш скрипт вот такой строчкой:

Для наглядности покажу куда я его вставил:

Обязательно сохраните все изменения и вот, что у вас должно получиться на сайте:

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

Вставим следующий код ниже в область футера:

snowStorm.snowColor = "#99ccff"; // голубоватые снежинки, цвет можно менять snowStorm.flakesMaxActive = 100; // Показывать количество снежинок на странице snowStorm.useTwinkleEffect = true; // мерцающий эффект

В шаблоне все это будет выглядеть так:

Теперь посмотрим, что получилось в браузере:

Как мы видим наши снежинке на сайте стали нежно голубоватого цвета, прямо настоящий снегопад на сайте получился 🙂

Другие настройки скрипта снежинок

Для того, чтобы еще более «поизвращаться» над скриптом я пробегусь по другим опциям.

snowStorm . autoStart = true ; — выбор между тем будет ли снег автоматически появляться при загрузки страницы или нет.

snowStorm . animationInterval = 33 ; — измерение интервала миллисекунд на кадр. При значение = 20 быстрая и гладкая, но будет нагружать процессор. Если поставить = 50, то более консервативно, но медленнее.

snowStorm . flakeBottom = null ; — ограничение прилипания снегу к нижней части странице. Если не указано, то снег просто прилипнет к нижней части страницы сайта и исчезнет с прокруткой или скроллингом.

snowStorm . flakesMax = 128 ; — установка значения максимального количества снежинок, выпадающих в любой части страницы за единицу времени.

snowStorm . flakesMaxActive = 64 ; — устанавливает предел падающих снежинок (т.е движущихся на экране и считающихся активными).

snowStorm . followMouse = true ; — позволяет снегу двигаться на сайте с «ветром» по отношению к движению мышки по оси X (вправо/влево).

snowStorm . freezeOnBlur = true ; — останавливаем эффект снежинок, когда пользователь в данный момент выходит из окна браузера, например переходит на другую вкладку, тогда снег останавливается. Это сберегает CPU и приятнее для пользователя.

snowStorm . snowColor = "#fff" ; — белый цвет снега (не ешьте и не используйте на сайте желтый снег:-))

snowStorm . snowCharacter = " " ; — . ( ) = bullet. · entity (·) не используется, поскольку в некоторых системах это считается квадратом. Любое изменение можно привести к обрезке нашей снежинки и может также повлечь flakeWidth (длина) / flakeHeight (высота) изменения, так что будьте осторожны.

snowStorm . snowStick = true ; — параметр позволяет снежинкам «прилипать» к низу экрана, когда выключен, то снег никогда не осядет на дно экрана.

snowStorm . targetElement = null ; — здесь немного сложнее, я это понял как html элемент прописывается по умолчанию в тело документа (body ). Может быть элементом ID строки, например ‘myDiV’ или DOM ссылкой. Как-то так.

snowStorm . useMeltEffect = true ; — при поддержке данного параметра упавший снег будет таять, при включенном значении.

snowStorm . useTwinkleEffect = true ; — позволяет снегу мерцать вне поля зрения в момент падения.

snowStorm . usePositionFixed = false ; — при булевском значение true — окно прокрутки не будет влиять на падающий снег, т.е он будет идти и идти. Это заметно увеличивает нагрузку на процессор. По умолчанию стоит false.

snowStorm . vMaxX = 8 ; snowStorm . vMaxY = 5 ; — значение быстроты снежинок по x и y для шторма. Случайная величина в этом диапазоне выбирается для каждого снежинки.

На этом все дорогие друзья, вполне возможно, что я допустил где-то ошибку в объяснении настроек скрипт, вы тогда меня поправьте. У меня, в целом, все прекрасно работает и радует глаз. Спасибо за внимание, жду ваших комментариев и дискуссий. У меня к вам вопрос — а какой эффект вы используете с наступлением зимы для сайта? 🙂