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

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

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

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

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

<script type="text/javascript">
//http://WEBypoku.ru
var snowsrc="sneg.gif" //путь к изображению снежинки
var no = 50; //кол-во снежинок
var hidesnowtime = 0; //время показа (в секундах), при 0 - бесконечно
var snowdistance = "pageheight";
var ie4up = (document.all) ? 1 : 0; //определение типа браузера
var ns6up = (document.getElementById&&!document.all) ? 1 : 0; //определение типа браузера
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}var dx, xp, yp;
var am, stx, sty;
var i, doc_width = 800, doc_height = 600; // размерыif (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
for (i = 0; i < no; ++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("<div id=\"sneg"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}

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 < no; ++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<no; i++) document.getElementById("sneg"+i).style.visibility="hidden"
}

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

Все переменные указаны, вы можете их с легкостью изменять, тем более все параметры подробно расписаны. Копируем скрипт и сразу после тега вставляем, или же создаем отдельный файл *.js с нашим скриптом падающего снега и подключаем его с помощью <script src=”http://Путь_к_файлу_со_скриптом” type=”text/javascript”></script>

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

снежинка снежинка

Постовые:

  1. Блог о SEO
  2. мирра

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

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

Добавить в закладки
Memori БобрДобр Google Яндекс Твиттер del.icio.us Мистер Вонг МоёМесто MyScoop RuSpace Сто закладок

]]>

Теги: , , , ,

июля 2, 2009

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 скрипты

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