При помощи JavaScript можно создать достаточно красивый эффект падающего снега для вашего сайта. Если вы не хотите разбираться как работает скрипт, просто пролистайте статью до конца и скачайте пример.

И так, скрипт состоит из двух основных частей: конфигурации, или настройки, и основных функций. Можете вздохнуть с облегчением, скрипт работает под всеми основными браузерами, по крайней мере под IE и Mozilla точно причем не содержит каких-то дополнительных картинок. Вам достаточно просто подключить файл JS.

Во-первых мы проверяем, поддерживает ли браузер работу скрипта и если да, запускаем на выполнение функцию:

if ((document.getElementById) && window.addEventListener || window.attachEvent)

{(function()

{

Далее мы настраиваем основные параметры скрипта:

var num = 30; // Количество снежинок
var timer = 30; // Скорость падения
var enableinNS6 = 1; // Включить поддержку скрипта в браузерах NS/Mozilla (1=да, 0=нет)

и определяем основные массивы, где будут хранится данные о снежинках (позиция, скорость падения и т.д.):

var y = [];
var x = [];
var fall = [];
var theFlakes = [];
var sfs = [];
var step = [];
var currStep = [];
var h,w,r;
var d = document;
var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;

В зависимости от заданной переменной num (количества снежинок) создаем снежинки:

for (i = 0; i < num; i++) {

sfs[i] = Math.round(1 + Math.random() * 1);
document.write('< div id="flake'+(idx+i)+'" style="position:absolute;top:0px;left:0px;width:'+sfs[i]+'px;height:'+sfs[i]+'px;background-color:#ffffff;font-size:'+sfs[i]+'px">< /div>');
}

Далее идут основные функции определения размеров экрана (чтобы снежинки не вылетали за пределы экрана) и определение координат каждой снежинки при падении. Я не буду приводить здесь все функции, все их вы можете просмотреть в примере.

В конце при помощи методов addEventListener и attachEvent мы перехватываем события, и переадресовываем их соответствующим функциям:

if (window.addEventListener) {

window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);

} 

else
if (window.attachEvent) {

window.attachEvent("onresize",winsize);
window.attachEvent("onload",init);

} 

Дублирование происходит из-за того, что метод addEventListener поддерживается только Mozilla, а attachEvent - Internet Exlorer. Таким образом при наступлении события onResize выполняется функция winsize, а при onLoad - init (инициалиция скрипта).