Падающий снег на сайт на JQuery
Зима, Новый Год. Многие хозяева сайтов хотят как-то украсить своё творение на новогодние праздники.
Одним из самых популярных способов является добавление на сайт анимации падающего снега.
Решений, скриптов реализующих эту возможность достаточно много , но мне больше всего понравился этот «
В этой анимации будет участвовать несколько видов различных снежинок, которые будут перемешиваться случайным образом, в результате чего, выглядеть будет все более эффектно.
Создание анимации ,как Вы поняли, будет реализовано по средствам библиотеки
Для работы скрипта необходима
А вот и код самого скрипта падающих снежинок:
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> |
Заменить «Ваш путь до файла 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’);
Скачать архив, включающий в себя всё необходимое для работы скрипта можно по
- Подробное руководство по продвинутому JavaScript
Отличная работа. Предлагаю также вот такой вариант падающего снегаsneg.tsymbal.su
Пожалуйста! У меня тоже сейчас данный скрипт стоит в моемКаталоге .
Спасибо, воспользовалась Вашим скриптом. Получилось очень красиво, жаль — скоро убирать