Зима, Новый Год. Многие хозяева сайтов хотят как-то украсить своё творение на новогодние праздники.

Одним из самых популярных способов является добавление на сайт анимации падающего снега.
Решений, скриптов реализующих эту возможность достаточно много , но мне больше всего понравился этот «Падающий снег на сайт на JQuery».
В этой анимации будет участвовать несколько видов различных снежинок, которые будут перемешиваться случайным образом, в результате чего, выглядеть будет все более эффектно.
Создание анимации ,как Вы поняли, будет реализовано по средствам библиотеки JQuery.

Пример работы данного скрипта.

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<link rel="stylesheet" type="text/css" href="Ваш путь до файла index.css" />
<script type="text/javascript" src="Ваш путь до файла jquery.js"></script>
 
<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>

1
2
3
4

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

Скачать архив, включающий в себя всё необходимое для работы скрипта можно по этой ссылке.

(3 голосов, средний: 2.33 из 5)
 Loading ...  

3 комментария на “Падающий снег на сайт на JQuery”