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

Категория JavaScripts (jQuery, AJAX), Полезное

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

Сегодня мы сделаем на нашем сайте падающий снег. Он будет реализован на языке 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 с нашим скриптом падающего снега и подключаем его с помощью 

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

снежинка

Постовые:

Другие посты, близкие по теме:

  1. Новостной блок своими руками на JavaScript
  2. Как сделать красивую полосу прокрутки на Вашем сайте на CSS?
  3. Создание буквицы с помощью CSS
  4. Простое Popup окно
  5. Реализация регистрации на сайте на PHP+MySQL
]]>

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

]]>

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

июля 2, 2009

6 комментариев по “Как сделать падающий снег на сайте с помощью 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 скрипты

  5. ]]> игорь ]]> сказал:
    мая 9, 2010 в 06:46

    подскажите плиз, можно этот скрипт переделать чтоб снег снизу вверх летел? очень нужно

  6. ]]> Admin ]]> сказал:
    мая 11, 2010 в 13:01

    игорь,
    внутри функции snowIE_NS6 в цикле поменяй строки на такие:
    yp[i] -= sty[i];
    if (yp[i] yp[i] = doc_height;

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