Скрипт падающих снежинок
Зимой на некоторых сайтах Вы наверняка наблюдали подающие сверху снежинки. Если с данным скриптом не переусердствовать, то выглядит это вполне красиво.
Как Вы уже могли заметить, на данной страничке установлен скрипт падающего снега, который мы рассмотрим в данной теме.
Это довольно простой скрипт падающих снежинок и имеет небольшое количество настроек. Если Вас интересует более продвинутый вариант скрипта падающих снежинок, то рекомендуем Вам посетить тему Скрипт снегопада.
Для добавления на своем сайте идущего снег, достаточно скопировать к себе следующий код:
<script type="text/javascript">
var imgsrc = "image/snow/snow.gif";
var height = document.body.scrollHeight;
if (height<document.body.clientHeight) height = document.body.clientHeight;
var width = document.body.scrollWidth;
var col = Math.round(height/25); //количество снежинок
var amp = new Array();
var x_pos = new Array();
var y_pos = new Array();
var stx = new Array();
var sty = new Array();
var deltax = new Array();
var obj = new Array();
for (i=0; i<col; ++i) {
amp[i] = Math.random()*19;
x_pos[i] = Math.random()*(width-amp[i]-29);
y_pos[i] = Math.random()*height;
stx[i] = 0.03 + Math.random()*0.25;
sty[i] = 2 + Math.random();
deltax[i] = 0;
document.write("<img id=\"sn"+ i +"\" style=\"position: absolute; " +
"z-index: 50; top: -50px; left: -50px;\" src='" + imgsrc + "'>");
obj[i] = document.getElementById("sn" + i);
}
function flake() {
for (i=0; i<col; ++i) {
y_pos[i] += sty[i];
if (y_pos[i]>height-49) {
x_pos[i] = Math.random()*(width-amp[i]-29);
y_pos[i] = 0;
}
deltax[i] += stx[i];
obj[i].style.top = y_pos[i] + "px";
obj[i].style.left = x_pos[i] + amp[i]*Math.sin(deltax[i]) + "px";
}
setTimeout("flake()", 60);
}
flake();
</script>Не забудьте в строчке imgsrc="image/snow/snow.gif"; указать путь к картинке снежинки.
Чтобы снежинки были распределены по всей высоте странички, JavaScript код необходимо вставить после тега </body>.
Скачать GIF-изображения снежинок можно с нашего сайта по ссылке - Снежинки.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
document.write("<img id=\"sn" + i + "\" style=\"position: absolute;
P.S. В теме код подправил, чтобы ничего самостоятельно менять не пришлось.
var imgsrc = "мой сайт.ru/название темы/images/snow.gif";
Что неправильно сделал? Спасибо.
на var height = document.body.scrollHeight;
P.S. В скрипт на сайте тоже внес изменения.
P.S. Скрипт в теме тоже изменил.
Для того, чтобы это исправить, добавьте после function flake() { строчки:
height = document.body.scrollHeight;
if (height<document.body.clientHeight) height = document.body.clientHeight;
1) Изменить время в setTimeout("flake()", 50);
2) Изменить смещение снежинок по оси Y в строке sty[i] = 2 + Math.random();
Вы можете мне подсказать, что нужно изменить в коде, чтобы снежинки падали только по бокам сайта?
if (i%2==0) x_pos[i] = Math.random()*(width*0.15);
else x_pos[i] = width-amp[i]-29-Math.random()*(width*0.15);
А перед строчкой amp[i] = Math.random()*19; добавьте следующие две:
if (i%2==0) imgsrc = "image/snow/the_flake0.gif";
else imgsrc = "image/snow/the_flake1.gif";