О сайте Новости Статьи Игры Программы Книги Видео Креатив Веб дизайн Wordpress
Userator - Продвижение сайта за счет поведенческих факторов, автоматизация поведенческих факторов, социальные факторы
Новые комментарии
  • Лолита: Я тоже искала программу для создания шаблонов для WP, наконец то нашла, спасибо!!
  • alex: Отличная работа. Предлагаю также вот такой вариант падающего снега http://sneg.tsymbal.su/
  • Лена: а я сайт держу на этом дешевом хостинге http://unlim24.com/sharedhosti ng.html
  • Андрей: Быстрый и не дорогой VPS сервер http://unlim24.com/vds-vps.htm l
Рекламные обзоры
return_announcements(); ?>

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

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

Одним из самых популярных способов является добавление на сайт анимации падающего снега.
Решений, скриптов реализующих эту возможность достаточно много , но мне больше всего понравился этот «Падающий снег на сайт на 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>

Данный код следует разместить между тегов <head> и </head>
Заменить «Ваш путь до файла index.css» и «Ваш путь до файла jquery.js» 
Указать реальное положение файлов sneg1.gif', sneg2.gif, sneg3.gif, sneg4.png
Добавить новый див <id="container"> сразу после тега <body>

Скрипт имеет несколько настроек:

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 ... Loading ...  

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

Октябрь 2017
Пн Вт Ср Чт Пт Сб Вс
« Июнь «-»  
 1
2345678
9101112131415
16171819202122
23242526272829
3031  
Управление


+ четыре = 12


Кто на сайте