Падающие снежинки на jQuery
Как известно, зимой становится очень популярным добавление на свой сайт скрипта с падающими снежинками. В этой теме мы хотим продемонстрировать Вам простой и небольшой по своим размерам скрипт падающих снежинок с использованием библиотеки jQuery. Как добавить падающие снежинки мы уже рассматривали ранее в темах Скрипт падающих снежинок и Скрипт снегопада.
Основным отличием предлагаемого в данной теме скрипта от рассмотренных ранее является использование библиотеки jQuery. Таким образом, данный скрипт должен работать во всех браузерах и стал намного компактнее по сравнению с предыдущими.
Как Вы уже могли заметить, на данной страничке уже установлен описываемый нами скрипт падающих снежинок на jQuery.
Для того чтобы получить на своем сайте подобный падающий снег, Вам понадобится подключить библиотеку jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>Скачать GIF-изображения снежинок Вы можете и с нашего сайта по ссылке - Снежинки.
Теперь Вам осталось только добавить сам скрипт, реализующий появление, падение и пропадание снежинок на экране. Для этого скопируйте в тело Вашей странички следующий код:
<script type="text/javascript">
window.onload = function(){ snow(1); }
function snow(id){
var png_sh = Math.floor(Math.random()*5) + 1;
var pos_x = Math.floor(Math.random()*98) + 1;
var step = Math.floor(Math.random()*30) - 15;
var end_x = pos_x + step;
var img = "<img id='snow_" + id + "' style='left: " + pos_x +
"%; top: -50px; position: fixed;' src='image/snow/flake" + png_sh + ".gif'>";
$("body").append(img);
move_show(id, end_x);
id++;
setTimeout("snow(" + id + ");", 250);
}
function move_show(id, end_x){
$("#snow_" + id).animate({top: "120%", left: "" + end_x + "%"}, 20000, function(){
$("#snow_" + id).empty().remove();
});
}
</script>Обращаем Ваше внимание на то, что путь к изображениям снежинок и их расширение указывается в src='image/snow/flake" + png_sh + ".gif'. В нашем случае все имена файлов с картинками начинаются на flake.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
"src='image/snow/flake" + png_sh + ".gif'"
Где png_sh - случайное число от 1 до 5. Следовательно, получаются пути вида image/snow/flake1.gif, image/snow/flake2.gif и т.д.
А можно ли изменить направление полета снежинки? Интересует снизу вверх.
Но у меня на странице есть banner и form и снежинки летят за ними и продолжают лететь после, когда кончаются эти оба объекта. Что мне нужно поменять в коде?