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

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

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

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

<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’);

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

Забрать бесплатно Падающий снег на сайт на JQuery

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *