www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.
Веб-дизайн и поисковая оптимизация
Вебдизайн с jQuery - это очень просто!
• Фотогалерея jQuery - просто и красиво!
• Фотогалерея jQuery со слайд-шоу
• Фотогалерея для интернет магазина
• Фотогалерея prettyPhoto
• Фотогалерея Fancybox
• Карусель изображений jQuery Waterwheel
• Простая карусель JCarouselLite
• Календарь в форме обратной связи
• Создание простого анимированного меню
• Создание слайд-шоу для сайта
• Zoomy - лупа для просмотра изображений
• Увеличение изображений. Плагин Nivo Zoom
>> смотреть все статьи о jQuery
"Падающий снег" на сайте
С приближением Нового года на большинстве сайтов появляются две вещи: "падающий снег" и страница распродаж и скидок. И то и другое делается очень просто. Снег - с помощью плагинов jQuery, а скидки и распродажи путем изображения над ценником перечеркнутого жирной красной линией большего числа, якобы соответствующего старой цене.
Нас, однако, интересует сейчас только размещение "падающего снега" на странице сайта. Для этого есть несколько простых вариантов. Рассмотрим два из них на основе jQuery.
Первый вариант "падающего снега"
Все снежинки имеют один рисунок, но разный размер. Обычно для этого используют значок с кодом ❄ (см. статью "Символы Юникода - полезные значки для сайта"). Пример такого снега вы видите на этой странице. Разработчик плагина - программист из Словении Иван Лазаревич (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. Оно задает положение снежинок поверх слайдеров (слайд-шоу) и выпадающих меню, если они есть на вашей странице.
Второй вариант "падающего снега"
Для этого варианта используются свои картинки снежинок, как показано на рис.1. Благодаря этому, плагин более красочен, а кроме того, его с успехом можно использовать и для других эффектов. Например, заменив рисунки снежинок лепестками роз, можно украсить страничку свадебного сайта, а падающие ромашки придутся к месту на сайте о летнем отдыхе.
Рис.1. "Падающий снег" на сайте
Для установки опять используем папку 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:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru