www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.

Веб-дизайн и поисковая оптимизация

Логотип Софт

Вебдизайн с jQuery - это очень просто!

"Падающий снег" на сайте

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

Нас, однако, интересует сейчас только размещение "падающего снега" на странице сайта. Для этого есть несколько простых вариантов. Рассмотрим два из них на основе jQuery.

Первый вариант "падающего снега"
Все снежинки имеют один рисунок, но разный размер. Обычно для этого используют значок с кодом &#10052. Пример такого снега вы видите на этой странице. Разработчик плагина - программист из Словении Иван Лазаревич (Ivan Lazarevic), автор популярного слайдера Coin Slider (см. статью "Cлайд-шоу для сайта - Coin Slider").

Установку "падающего снега" начинаем с создания новой папки, естественно, с именем snow, затем скачиваем архив и распаковываем его в эту папку. У нас получится в ней два скрипта jquery-1.8.3.min.js и jquery.snow.js.

Далее необходимо добавить в заголовок страницы внутрь тега <head>...</head> следующие строчки, указывающие пути к этим скриптам, и небольшой JavaScript для инициализации "падающего снега":

<script type="text/javascript" src="snow/jquery-1.8.3.min.js"></script>
<script type=
"text/javascript" src="snow/jquery.snow.js"></script>
<script type=
"text/javascript">
$(document).ready( function(){
$.fn.snow();
});
</script>

Для того, чтобы снег появился на странице сайта, достаточно добавить внутрь тега <body> (лучше в начале страницы) строчку
<div id="snow"> </div>.

Настроек у этого плагина всего четыре. Они находятся в самом начале файла jquery.snow.js и их можно изменять в любом редакторе или в Блокноте:
minSize : 10, // минимальный размер снежинки
maxSize : 20, // максимальный размер снежинки
newOn : 500, // частота появления снежинок в мсек, то есть густота снега
flakeColor : "#bbbbbb" // цвет снежинок

Обратите также внимание на значение z-index:10 для снега, которое задано в первых строчках файла jquery.snow.js. Оно задает положение снежинок поверх слайдеров (слайд-шоу) и выпадающих меню, если они есть на вашей странице.

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

Для установки опять используем папку snow, только теперь распакуем в неё другой архив, в котором кроме скриптов есть четыре разных изображения снежинок. Далее аналогично первому примеру внутрь тега <head>...</head> вставим строчки, указывающие пути к новым файлам "падающего снега":

<script type="text/javascript" src="snow/jquery-1.8.3.min.js"></script>
<script type=
"text/javascript" src="snow/snow.js"></script>

И наконец, добавим внутрь тега <body> (лучше в начале страницы) строчку
<div id="snow"> </div>.

Если у вас не появился снег, то проследите корректность ввода полного адреса изображений снежинок в следующей строке файла snow.js:
var img="<img id='snow_"+id+"' style='left:"+pos_x+"%; top:-10%; position:fixed;' src='show_"+png_sh+".png'/>";.

Регулировка густоты снега задается в том же файле числовым аргументом в строке
setTimeout("snow("+id+");",100); // частота снежинок,
а скорость движения снежинок в строке
$("#snow_"+id).animate({top:"150%",left:""+end_x+"%"},20000,function() // скорость движения снежинок

Также, как и в первом варианте, обратите внимание на значение z-index:10, чтобы снег перекрывал расположенные на странице слайдеры, выпадающие меню и т.п.

Как видим, запустить снежок на сайте проще-простого.
С наступающим Новым годом!

1.12.2013 г.

Задать вопрос автору






Яндекс.Метрика

Copyright © 2008 - Марк Розенталь e-mail: Мой e-mail
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru
Ключевые слова : jquery падающий снег, jquery скачать, плагины jquery, установка jquery