Скрипт снегопада (падающих снежинок)
Зимой на некоторых сайтах Вы наверняка наблюдали идущий снег. Ранее мы уже рассматривали простой Скрипт падающих снежинок.
В данной теме мы хотим Вам предложить более продвинутый вариант скрипта снегопада. Основным его отличием от предыдущего, схожего по своей сути скрипта падающих снежинок, является возможность добавлять несколько разных типов снежинок. Также в данном скрипте идущего снега движение снежинок немного отличается от ранее предложенного скрипта.
Вы уже наверно обратили внимание, что на данной страничке установлен описываемый нами скрипт снегопада.
Для того чтобы сделать на своем сайте подобный снегопад, скопируйте к себе на сайт следующий JavaScript код:
<script type="text/javascript">
var count = 50;
var flake = new Array("flake1.gif", "flake2.gif", "flake3.gif",
"flake4.gif", "flake5.gif");
var Y = new Array();
var X = new Array();
var Speed = new Array();
var Step = new Array();
var Xstep = new Array();
var Height = document.body.scrollHeight;
var Width = document.body.scrollWidth;
for (i=0; i<count; i++) {
Pic="image/snow/" + flake[Math.floor(Math.random()*flake.length)];
document.write('<img id="snow'+i+'" src="'+Pic+'" style="position:absolute;">');
}
for (i=0; i<count; i++){
Y[i] = Math.round(Math.random()*Height);
X[i] = Math.round(Math.random()*Width) - 90;
Speed[i] = Math.random()*5 + 2;
Xstep[i] = 0;
Step[i] = Math.random()*0.1 + 0.05;
}
function fall(){
for (i=0; i<count; i++) {
sx = Speed[i]*Math.cos(Xstep[i]);
if (X[i]+sx>Width-89) X[i] -= sx;
X[i] += sx;
Y[i] += Speed[i]*Math.sin(Math.PI/2);
if (Y[i]>Height-60) {
Y[i] = 0;
X[i] = Math.random()*Width - 89;
Step[i] = Math.random()*0.1 + 0.05;
Speed[i] = Math.random()*5 + 2;
}
document.getElementById("snow" + i).style.left = X[i] + "px";
document.getElementById("snow" + i).style.top = Y[i] + "px";
Xstep[i] += Step[i];
}
setTimeout("fall()", 50);
}
fall();
</script>Скачать GIF-изображения снежинок можно с нашего сайта по ссылке - Снежинки.
Не забудьте в строчке скрипта Pic="image/snow/"... заменить "image/snow/" на путь к папке с изображениями снежинок на Вашем сайте. Теперь скрипт должен заработать и будет радовать ваших посетителей в зимнее время.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Еще можно уменьшить скорость падения снежинок путем увеличения задержки в setTimeout("fall()", 50);
и if (Y[i]>Height-60) { Y[i]=0; на if (Y[i]<0) { Y[i]=Height-60;
Вставить сюда width='"+ randomInteger(3, 15) +"'
document.write("<img width='"+ randomInteger(3, 15) +"' id=\"sn"+ i +"\" style=\"position: absolute; " +
"z-index: 50; top: -50px; left: -50px;\" src='" + imgsrc + "'>");
и сама функция
function randomInteger(min, max) {
// получить случайное число от (min-0.5) до (max+0.5)
let rand = min - 0.5 + Math.random() * (max - min + 1);
return Math.round(rand);
}