Как сделать падающий снег на сайте с помощью JavaScript

Всем читателям, привет! С наступлением Нового года все начали украшать елки, дома и т.д. Веб-мастера тоже не “сидят” на месте, они украшают свой сайт, меняют дизайн под зимний стиль.

Сегодня мы сделаем на нашем сайте падающий снег. Он будет реализован на языке JavaScripts.

Пример падающего снега на Javasctipts
Вот собственно скрипт:

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
for (i = 0; i dx[i] = 0;
xp[i] = Math.random()*(doc_width-50); // координата снежинки по X
yp[i] = Math.random()*doc_height; //координата снежинки по Y
am[i] = Math.random()*20; // амплитуда
stx[i] = 0.02 + Math.random()/10; // расстояние между снежинками по Х
sty[i] = 0.7 + Math.random(); // расстояние между снежинками по Y
if (ie4up||ns6up) {
document.write("

");
}
}

function snowIE_NS6() { // Снежинки для InternetExplorer и NetScape6
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("sneg"+i).style.top=yp[i]+"px";
document.getElementById("sneg"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}

function hidesnow(){ // исчезновение снежинок с истечением времени
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i }

if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}

Все переменные указаны, вы можете их с легкостью изменять, тем более все параметры подробно расписаны. Копируем скрипт и сразу после тега вставляем, или же создаем отдельный файл *.js с нашим скриптом падающего снега и подключаем его с помощью 

И не забудьте создать файл с изображением снежинки

снежинка

]]>

Добавить в закладки

]]>

Теги: , , новый год, , юзабилити

4 комментариев по “Как сделать падающий снег на сайте с помощью JavaScript”

  1. ]]> Дед Мороз ]]> сказал:
    декабря 9, 2009 в 01:49

    Скоро Новый Год!
    Ставим скрипт

  2. ]]> ]]> сказал:
    декабря 20, 2009 в 01:34

    а можно поставить снег в блог на tut.by?

  3. ]]> Гирлянды на сайт ]]> сказал:
    декабря 20, 2009 в 18:42

    [...] не только ёлку, но и наш с вами сайт. С помощью урока снег на сайте, мы уже добавили падающие снежинки с помощью Javascript. [...]

  4. ]]> Admin ]]> сказал:
    декабря 21, 2009 в 00:50

    паша,
    главное иметь доступ к файлам или хотя бы иметь возможность добавлять js скрипты

Оставьте комментарий: