Запретив использование 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, чтобы немного вспомнить зимние деньки:-). Делать падающие снежинки мы будем с помощью скрипта и плагина.
Т. е в этой статье разберем два абсолютно работающих способа. Там вы уже решите для себя какой вариант вам предпочтительнее. Итак давайте приступим к практической части урока.
Как сделать падающие снежинки 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 для шторма. Случайная величина в этом диапазоне выбирается для каждого снежинки.
На этом все дорогие друзья, вполне возможно, что я допустил где-то ошибку в объяснении настроек скрипт, вы тогда меня поправьте. У меня, в целом, все прекрасно работает и радует глаз. Спасибо за внимание, жду ваших комментариев и дискуссий. У меня к вам вопрос — а какой эффект вы используете с наступлением зимы для сайта? 🙂
позаботится об украшение сайта . Заходишь на сайт, а там, падает снег или снежинки , чувствуется дух праздника и сразу создаётся хорошее праздничное настроение. Хотя снег виртуальный, но всё равно, радует. Согласны? Ну конечно. Тогда, я вам сегодня подскажу - Как добавить, включить, установить снег или снежинки на сайте .Для этого существуют специальные плагины, с помощью которых можно на праздничные дни включить падающий снег или снежинки на сайте, а для тех, кто боится модулей, есть скрипт падающего снега на сайт. Скрипт я представлю вам в самом конце поста. А пока самые простые плагины, которые обновляются и совместимы с последней версией 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
Я потратил много времени, чтобы найти в интернете готовые скрипты падающих снежинок. Мне все-таки удалось найти скрипт с очень симпатичными. О нем я и хочу вам рассказать.
Первая версия скрипта со снежинками. Эту версию скрипта не скачивайте - она сырая.
Скрипт «Падающие снежинки»Чем же он отличается от других скриптов, генерирующих снежинки? Дело в том, что падающие снежинки не являются изображениями. Падающие снежинки - это обычные символы шрифта (звездочки «*») . То есть форма снежинок зависит от заданного в настройках шрифта. Вы можете выбрать любой другой стандартный шрифт и тогда снежинки будут другими.
Кроме формы снежинок, можно еще задавать цвет, размер, количество и скорость падения.
Настройки скрипта: цвет, форма, размер и количество снежинок // 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Скрипт буржуйский и пожтому комментарии на английском языке. Но программерам английский язык - родной. Надеюсь с этим сложностей не возникнет.
Известные проблемы со скриптомОригинальный скрипт не лишен недостатков. Но все они уже успешно устранены.
Например, если вы положите скрипт в папку js, которая находится в корне вашего сайта, тогда подключение скрипта будет таким: добавьте вот эту строку в шаблон сайта, например перед тегом body: