В преддверье нового года думаю тема падающего снега будет актуальной. Предлагаю Вашему вниманию скрипт падающего снега на сайте.
Сам скрипт устанавливаем в любое место вашей страницы, желательно как можно выше в HEAD.
<script language="JavaScript1.2">
grphcs=new Array(2);
Image0=new Image();
Image0.src=grphcs[0]="http://www.mastersite.org.ua/uploaded_images/sneg1.gif";
Image1=new Image();
Image1.src=grphcs[1]="http://www.mastersite.org.ua/uploaded_images/sneg2.gif";
Amount=15;
Ypos=new Array();
Xpos=new Array();
Speed=new Array();
Step=new Array();
Cstep=new Array();
ns=(document.layers)?1:0;
ns6=(document.getElementById&&!document.all)?1:0;
if (ns){
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"></LAYER>");
}
}
else{
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];//osw
document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
}
document.write('</div></div>');
}
WinHeight=600;
WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;
for (i=0; i < Amount; i++){
Ypos[i] = Math.round(Math.random()*WinHeight);
Xpos[i] = Math.round(Math.random()*WinWidth);
Speed[i]= 1.2;
Cstep[i]=0;
Step[i]=Math.random()*0.1+0.2;
}
function fall(){
var WinHeight=600;
var WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;
var hscrll=(ns||ns6)?window.pageYOffset:document.body.scrollTop;
var wscrll=(ns||ns6)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < Amount; i++){
sy = Speed[i]*Math.sin(90*Math.PI/180);
sx = Speed[i]*Math.cos(Cstep[i]);
Ypos[i]+=sy;
Xpos[i]+=sx;
if (Ypos[i] > WinHeight){
Ypos[i]=-60;
Xpos[i]=Math.round(Math.random()*WinWidth);
Speed[i]=1;
}
if (ns){
document.layers['sn'+i].left=Xpos[i];
document.layers['sn'+i].top=Ypos[i]+hscrll;
}
else if (ns6){
document.getElementById("si"+i).style.left=Math.min(WinWidth,Xpos[i]);
document.getElementById("si"+i).style.top=Ypos[i]+hscrll;
}
else{
eval("document.all.si"+i).style.left=Xpos[i];
eval("document.all.si"+i).style.top=Ypos[i]+hscrll;
}
Cstep[i]+=Step[i];
}
setTimeout('fall()',40);
}
window.onload=fall
//-->
</script>
30-12-08 20:12:34
Евгений - 22-12-11 12:12:56
Обновлю так сказать актуальную на сегодня тему... :)
А именно; Падающие снежинки на сайте...
По предложенному варианту , работает только на старых браузерах..
Ибо на новых версиях "Опера" "Хром" и "Лиса" данный скрипт не работает.
Снежинка (изображение) сидит в левом верхнем углу и ... собственно на этом всё...
Видимо, нынче снега не буит.. :(
=============================================
Вопрос; Как завести этот скрипт на новых версиях браузеров?
Саша - 24-01-11 15:01:24
Супер! СПАСИБО!!!
bublik - 29-12-10 11:12:01
очень класно!
Антон - 15-12-10 12:12:15
Немного не правильно на мой взгляд при уменьшении размера браузера смотреть на танец скролов и горизонтального и вертикального(хотя посетители может и повесилятся ;)).
сас - 1-12-10 22:12:31
В мозиле не робит! Так видать плохо тестили!
kykyi - 6-07-10 13:07:13
Вы наверное тоже искали скрипты дождя или снега, иногда пузырей или воздушных шаров, которые летели на странице, но каждый раз находили все одни и те же скрипты, а новых так и не удавалось найти.
Не секрет что найденные вами скрипты во многих случаях не корректно работали в различных браузерах или вообще не работали...
Побродив по просторам интернета и увидев что многие скрипты не работают, я решил написать свой универсальный скрипт который бы включал в себя эффект дождя, снега и пузырей на яваскрипте, да еще чтобы можно было с легкостью настроить количество, скорость, и элементы скрипта.
Создав скрипт я протестировал его на всех доступных мне браузерах и убедился что он везде работает.
Потом подумав что пользователям было бы интересно пользоваться не просто скриптом а модулем с несколькими скриптами я добавил в скрипт коды таких эффектов как выдвижная панель с картинкой, рекламная панель, очень красивая выдвижная панель с текстом, а также добавил несколько функция для вычисления координат мыши и функций для работы с AJAX.
Протестировав все в браузерах я был удовлетворен проделанной работой.
Посмотреть, протестировать и оценить мои творения вы можете на сайте
http://javascript.onfind.net/
на сайте нет ни рекламы ни лишней информации так что надеюсь ссылка не будет удалена
все коды скрипта открыты, не зашифрованы, так что можете спокойно его изучить.
прошу не ругать за громкое название Библиотека javascript, она еще в процессе :)
javascript.onfind.net
Dark - 6-03-10 14:03:47
На снег не похоже. :(
Замени синус и косинус на случайные числа. Картинку замени на div размером 1px с белым фоном (можно от белого на пререднем плане до чуть сероватого на заднем). И еще, работай через заранее сгенеренную табличку с значениями рандома или тригонометрии. Быстрее будет чем каждый раз считать. И количество снежынок тогда можно увеличить.
Мож кто знает как сделать так чтобы снег цеплялся за содежимое странички? :)
Dash - 12-02-10 13:02:35
Красиво!Спасибо большое!
levikot - 30-12-09 00:12:22
скрипт работает но с некторой оговоркой. почему снежинки смещены относительно экрана в право? полоса прокрутки по горизонтали постоянно смещается. как сделать чтобы снежитки не вылетали за видимую часть экрана?
Светлана - 22-12-09 13:12:36
супер, очень красиво!!! Большое спасибо!)))
Валентин - 11-12-09 17:12:44
Скрипт не устанавливал и не пробывал, но зато безгранично верю Тарасищу - сказал красиво - значит красиво)))
Петька - 10-12-09 12:12:20
Спасибо за снежинки! :)
Теперь они летают у нас на сайте :)
Светлана - 10-12-09 10:12:18
Замечательно!
zyab - 9-12-09 07:12:06
Спасибо!
Добавил себе, запускаю по кнопке)
Андрей - 8-12-09 09:12:49
Красиво, спс. Скрипт работает с эксплорером, в мазили стоит просто снежинка в углу.
Hranitel - 3-12-09 09:12:17
огромное СПС за скрип замечательно работает без всяких косяков! Браво!
Fapia - 27-11-09 20:11:00
Замечательно работает. Спасибо огромное!
Мак - 24-11-09 13:11:46
забросил в head - появилась одна снежинка в левом верхнем углу и... все(((
Галина - 16-11-09 06:11:26
Супер!!! СПА-СИ-БА!!! :) Такое праздничное настроение этот скриптик создает!!!
Aiver - 20-01-09 21:01:37
Очень интересно, спасибо большое
andrey - 3-01-09 14:01:00
очень интересно)
Написать комментарий
ВНИМАНИЕ: Все поля необходимо заполнить
Контакты
Моб. тел.: 8-097-99-22-00-6 E-mail:tarasishe@gmail.com Портфолио работ:http://mij.org.ua/ Деятельность: Создание сайтов, сайтов - визиток в Харькове, поддержка и размещение в Интернет.
Евгений - 22-12-11 12:12:56
Обновлю так сказать актуальную на сегодня тему... :)
А именно; Падающие снежинки на сайте...
По предложенному варианту , работает только на старых браузерах..
Ибо на новых версиях "Опера" "Хром" и "Лиса" данный скрипт не работает.
Снежинка (изображение) сидит в левом верхнем углу и ... собственно на этом всё...
Видимо, нынче снега не буит.. :(
=============================================
Вопрос; Как завести этот скрипт на новых версиях браузеров?