Падающий снег на JavaScript
Описание: Сегодня решил подготовить актуальный на текущий день скрипт. На улице зима, идёт снег, и мне показалось, что многие Web-мастера тоже хотели бы, чтобы на их сайтах падали снежинки. Представляю Вашему вниманию скрипт "Падающий снег на JavaScript". Преимущества скрипта в том, что ему не нужно никаких сторонних картинок, ведь снежинка - это обычная "*". Поэтому данный скрипт очень хорош, и если Вы хотите создать зимнюю атмосферу у себя на сайте, то можете копировать данный скрипт и вставлять его на своём сайте.
Код JavaScript (вставлять между тегами <head> и </head>):
<script language="JavaScript">
// Максимальное количество снежинок
var snowmax=40;
var snowcolor=new Array("#AAAACC","#DDDDFF","#CCCCDD","#F3F3F3","#F0FFFF");
var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS");
var snowletter="*";
//Скорость
var sinkspeed=0.5;
//Максимальный размер снежинок
var snowmaxsize=30;
//Минимальный размер снежинок
var snowminsize=8
var snow=new Array();
var marginbottom;
var marginright;
var timer;
var i_snow=0;
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent;
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/);
var ns6=document.getElementById&&!document.all;
var opera=browserinfos.match(/Opera/);
function randommaker(range) {
rand=Math.floor(range*Math.random());
return rand;
}
function initsnow() {
if (ie5 || opera) {
marginbottom = document.body.clientHeight;
marginright = document.body.clientWidth;
}
else if (ns6) {
marginbottom = window.innerHeight;
marginright = window.innerWidth;
}
var snowsizerange=snowmaxsize-snowminsize;
for (i=0;i<=snowmax;i++) {
crds[i] = 0;
lftrght[i] = Math.random()*15;
x_mv[i] = 0.03 + Math.random()/10;
snow[i]=document.getElementById("s"+i);
snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)];
snow[i].size=randommaker(snowsizerange)+snowminsize;
snow[i].style.fontSize=snow[i].size;
snow[i].style.color=snowcolor[randommaker(snowcolor.length)];
snow[i].sink=sinkspeed*snow[i].size/5;
snow[i].posx=randommaker(marginright-snow[i].size);
snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size);
snow[i].style.left=snow[i].posx;
snow[i].style.top=snow[i].posy;
}
movesnow();
}
function movesnow() {
for (i=0;i<=snowmax;i++) {
crds[i] += x_mv[i];
snow[i].posy+=snow[i].sink;
snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]);
snow[i].style.top=snow[i].posy;
if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])) {
snow[i].posx=randommaker(marginright-snow[i].size);
snow[i].posy=0;
}
}
var timer=setTimeout("movesnow()",50);
}
for (i=0;i<=snowmax;i++) {
document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
</script>Код HTML (вставлять между тегами <body onLoad = "initsnow()"> и </body>):
<p style = "text-align: center;">Идёт снег...</p> -
Создано 14.12.2010 15:51:25
-
Михаил Русаков
Комментарии (25):
почему-то работает только в IE(( и почему-то мне не видно комментов других пользователей(( то же самое и с форумом((
Ответить
В Firefox 3.6.17 также работает и в любом современном браузуре тоже. Комментарии других пользователей Вы видите, обратного быть не может. Если нет комментариев, значит, к этой статье комментариев вообще нет. А форум только появился, и там вообще нет ни одного сообщения.
Ответить
Разобрался в чем проблема. Скрипт работал в IE8 и НЕ работал в: Opera 11.10 Safari 5.0.4 Firefox 4.0 Chrome 11.0. по той простой причине, что координаты снежинок были без 'px'. Стоило добавить в 2-х строчках функции movesnow() вот это: + 'px' - и все везде вдруг заработало))) Для большей наглядности можно в body вставить не параграф, а блок: <div style = "text-align: center; color: #bbf; height: 700px; background: #55f">Идёт снег...</div> А скрипт мне очень понравился, спасибо!
Ответить
В каких строчках добавить + 'px'? Или просто напишите фрагмент кода где вставлять нужно.
Ответить
дописать волшебные символы + 'px' нужно везде, где определяется позиция снежинок по горизонтали и вертикали (style.left и style.top)
Ответить
Всё равно не работает!
Ответить
а body onLoad не забыл вставить?)
Ответить
и что в onLoad написать?
Ответить
я сдаюсь(( в статье же все есть...
Ответить
Сделал всё как в статье! Поставил + 'px'. Всё равно ничего не работает! Скиньте полный код скрипта с добавленными + 'px' если вам не составит труда на e-mail: nikich-kust@yandex.ru
Ответить
Могу и я Вас попросить скинуть полныЙ код мне на мейл. Я сделала отдельный скрипт и его закинула в html файл. В опере и IE все ок, но в гугл хром не работает:((. Если не составит труда, скиньте, пожалуйста, на мейл: elvira_vn@rambler.ru
Ответить
Это и есть полный код скрипта. И в Chrome должно работать (у меня версия 15.0.874.121 m). Попробуйте удалить DOCTYPE, иногда это помогает.
Ответить
Удалила, но все равно не помогло(( В хроме упорно не работает. А спросила я насчет полного скрипта т.к. выше пользователь Сева писал, что надо добавить + 'px'. Просто видно я не поняла куда именно надо добавить, так как вставляла, но и это не помогло(( P.S. После удаления Doctype снег идет только на верхней части страницы, после чего тает((
Ответить
У меня работало в хроме! Только это было давно, я не помню что сделал чтобы заработало. P.S. Теперь у меня скрипт ни в одном браузере не пашет!
Ответить
snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+ 'px' ; snow[i].style.top=snow[i].posy + 'px' ; но опять таки, смотрится красиво и как я понимаю корректо только в IE (снегопад кажется трехмерным из-за того что снежинки имеют разную величину, в хроме все снежинки одинаковы, из-за чего эффект менее наглядный). Изучением Java занялся недавно, поэтому щас буду пробовать сам разобраться, а так кто соображает больше чем я сейчас, можете помочь) ЗЫ Неделю убил поиском подобного сайта, так ничего и не нашел, чисто случайно сюда попал и очень рад этой случайности. Спасибо автору за материалы выложенные на сайте, а главное за манеру и форму описания. Зачет!
Ответить
Здравствуйте, Михаил! Спасибо за красивый скрипт. Скажите, а можно падающие звёздочки заменить чем-либо другим, например простеньким img?
Ответить
Да, причём очень легко. Достаточно заменить строку var snowletter="*"; на var snowletter="<img src='img.jpg' />"; Где img.jpg - путь к нужному изображению.
Ответить
Спасибо за оперативный ответ. Ещё вопрос: почему в Опере звездочки находятся на белом фоне, как-будто нарисованы на маленьких карточках, это можно как-то исправить?
Ответить
Не заметил подобных проблем.
Ответить
Снег на сайт и еще много скриптов для украшения сайтов есть на бесплатном сервисе http://www.darii.ru
Ответить
Попробовал испытать предлагаемый скрипт. Те, кто писал о проблемах – были правы. С первого раза получились две недвижимые снежинки. Проблема решилась только после того, как убрал строку кода DOCTYPE, как и советовал Михаил. В четырех браузерах снежная сказка удалась! Ну как до этого можно было додуматься!!! А вот при замене «буквы» на картинку все снежинки стали одного размера. Хотя количество и скорость регулируются. Сильно подозреваю, что под изменение размера картинки скрипт не заточен. Что скажете, Михаил? И еще. После строки, объявляющей переменную var snowminsize=8, не стоит точка с запятой. Но, похоже, на работоспособность кода это не влияет.
Ответить
У меня только * на правом верхнем углу стоит но скрипт не читается
Ответить
хороший скрипт. я лично шустро разобрался што и где надо поставеть. только вот немогу понять одного почему при наличии ДОКТАЙПА он неработает, а сайт без доктайпа (ну согласитесь это несерьёзно) хотелось бы узнать как это исправеть?
Ответить
Классная фишка со снегом, работает в Опере, Мозиле, Хроме и IE. Только вот снежинки действительно не до конца падают, может если Михаил разобрал бы для нас теоретическую сторону скрипта, мы смогли бы сами решить эту проблемку...) Что-то я заметил, что во многих комментах Михаил отвечал в последний раз в 2013 году, а в настоящее время что случилось...времени нет на своих читателей??? В целом сайт зачет!!!
Ответить
Cпасибо большое!!! не работала, шел вниз по комментам поправлял, и сработала!!!
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.