Падающий снег на сайт с помощью jQuery


Падающий снег на сайт с помощью jQueryЕще один способ сделать падающие снежинки на сайт в канун Нового года. В этот раз помог сайт my-dle.ru на котором и был обнаружен данный скрипт

Для работы скрипта необходима библиотека Jquery практически любой версии, png-fix для IE6, сам скрипт и несколько картинок снежинок. Те снежинки, что лежат в архиве, не имеют полупрозрачности, соответственно не очень красиво будут отображаться в браузере поверх небелых элементов. Тут уже каждый сам для себя решит, что ему важнее. Если захотите использовать png24 с полупрозрачностью, то проблем не возникнет. Даже IE6 воспримет это нормально.

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

А вот и код самого скрипта падающих снежинок:

<script type="text/javascript">    snow_intensive=400;    snow_speed=20000;    snow_src=new Array('sneg1.gif','sneg2.gif','sneg3.gif','sneg4.png');    $(document).ready(snow_start);    function snow_start() {        snow_id=1;        snow_y=$("#container").height()-30;        setInterval(function() {            snow_x=Math.random()*document.body.offsetWidth-100;            snow_img=(snow_src instanceof Array ? snow_src[Math.floor(Math.random()*snow_src.length)] : snow_src);            snow_elem='<img class="png" id="snow'+snow_id+'" style="position:absolute; left:'+snow_x+'px; top:0;z-index:10000" src="'+snow_img+'"/>';            $("#container").append(snow_elem);            snow_move(snow_id);            snow_id++;        },snow_intensive);    }    function snow_move(id) {        $('#snow'+id).animate({top:snow_y,left:"+="+Math.random()*100},snow_speed,function() {        $(this).empty().remove();    });}</script>


Скрипт имеет несколько настроек:
container='container';
snow_intensive=400;
snow_speed=20000;
snow_src='sneg1.gif';


где:
container – id блока, внутри которого будет идти снег. в моем примере по ссылке ниже указан айди основного контейнера сайта. то есть снег будет идти по всей площади окна браузера.
snow_intensive – отвечает за интенсивность снега, чем меньше число, тем интенсивнее будет идти снег (не ставьте слишком маленькое значение, повесите слабые компьютеры пользователей, да и вообще рябить будет в глазах) .
snow_speed – скорость снега (чем меньше число, тем быстрее будут падать снежинки) .
snow_src – изображение снежинки, можно задать как одну картинку, так и в виде массива – тогда снежинки будут случайным образом перемешиваться.
Пример:
snow_src=new Array(‘snow1.png’,'snow2.png’,'snow3.gif’);

jquery-snow.zip [31,65 Kb] (cкачиваний: 1200)


TO USER: Для DLE 9.0 подключать Jquery не нужно (он есть по дефолту).

Источник: http://my-dle.ru/


Уважаемые посетители,
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.


13 декабря 2010  2 11 579   скрипт снег на сайте Версия для печати


Похожие публикации

Кросспостинг свежих материалов вашего сайта в блогохостингах и социальных сетях

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

Защищаем движок Dle от спам ссылок

Крайне полезная статья с сайта seomax.info И так, давайте сразу приготовим все, что нам нужно, так сказать "ящик инструментов", в этот ящик мы положим: 1. Notepad++, это отличный, бесплатный блокнот... читать далее

Скругленные границы через CSS

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

Индексация Flash Гуглом — краткий обзор

Поискав по Хабру, ничего подобного не нашёл. Enjoy. Итак, 30 июня Google в своем блоге объявили об усовершенствованиях в механизме индексации Flash. ( Читать дальше ) ... читать далее

как создавать очень красивые и удобные текстовые кнопки

Эта инструкция научит Вас, как создавать очень красивые и удобные текстовые кнопки (с эффектом нажатия), используя CSS.... читать далее

Интерактивные банеры для CMS DLE в примерах

В последних реализациях DLE улучшена защита и как следствие запуск ява-скриптов из тела страницы затруднен но допустим у вас есть потребность в прикручивании информеров или дополнительных сервисных... читать далее

Комментарии (2)

  1. #1 написал: serjrojnov
    Группа: Гости
    12 марта 2011 00:48

    Благодарю!
    • 0

       

  2. #2 написал: александр
    Группа: Гости
    1 сентября 2014 17:20

    Отличная работа. Предлагаю также вот такой вариант падающего снега http://sneg.tsymbal.su/
    • 0

       

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте Передача пусть говорят смотреть онлайн. . Статья: как украсить рыбу красиво.