Падающий снег на сайте


Падающий снег на сайте

8918
10 из 10
Проголосовало: 5






Эффект падающего снега на сайте. При желании, можно назначить определенный промежуток времени, когда он будет падать а когда - нет.

Так, приступим к работе. Для начала вставим на сайт скрипт. Его желательно вставить в самом конце страницы перед </body>. Такая установка предотвратит притормаживание при падении снега, так как страница уже будет подгружена.

Code
<script language="javascript" type="text/javascript">  
<!--  
Amount = 100;  

Image0 = new Image();  
Image0.src = "http://webo4ka.ru/Ucoz5/cneg_na_sait_co/padauchii_cneg/snow1.gif";  

grphcs = new Array(1);  
grphcs[0] = "http://webo4ka.ru/Ucoz5/cneg_na_sait_co/padauchii_cneg/snow1.gif";  

Ypos = new Array();  
Xpos = new Array();  
Speed = new Array();  
Step = new Array();  
Cstep = new Array();  
var YPosA;  
ns = (document.layers)?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><a http://webo4ka.ru/load/46-1-0-2139><img src="+rndPic+"><\/a><\/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];  
  document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute; top:0px; left:0px; width:20px; height:20px;">');  
  }  
  document.write('<\/div><\/div>');  
}  
WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight;  
WinWidth=(document.layers)?window.innerWidth: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]= Math.random()*3+2;  
  Cstep[i] = 0;  
  Step[i] = Math.random()*0.1+0.05;  
}  
function fall() {  
  var WinHeight = (document.layers)?window.innerHeight:window.document.body.clientHeight;  
  var WinWidth = (document.layers)?window.innerWidth:window.document.body.clientWidth;  
  var hscrll = (document.layers)?window.pageYOffset:document.body.scrollTop;  
  var wscrll = (document.layers)?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] = Math.random()*5+2;  
  }  
  if (ns) {  
  document.layers['sn'+i].left = Xpos[i];  
  document.layers['sn'+i].top = Ypos[i]+hscrll;  
  } else {  
  document.getElementById('si'+i).style.left = Xpos[i]+'px';  
  YPosA=Ypos[i]+hscrll;  
  document.getElementById('si'+i).style.top = YPosA+'px';  
  }  
  Cstep[i] += Step[i];  
  }  
  setTimeout('fall()',10);  
}  
fall();  
//-->  
</script>


При вставке скрипта в начало страницы, снег начнет падать сразу с момента входа на страницу. Если скрипт в конце страницы, то и снег пойдет только после загрузки страницы полностью.

Расшифруем некоторые параметры скрипта:

Amount = 100; - это количество видимых на странице снежинок.
Image0.src = "http://webo4ka.ru/Ucoz5/cneg_na_sait_co/padauchii_cneg/snow1.gif"; и grphcs[0] = "http://webo4ka.ru/Ucoz5/cneg_na_sait_co/padauchii_cneg/snow1.gif" - путь к изображениям снежинок.
width:20px; height:20px; - высота и ширина снежинок.

При желании можно выводить не один, а несколько типов снежинок. Для этого в скрипте нужно будет заменить текст:


Code
Image0 = new Image();  
Image0.src = "http://webo4ka.ru/Ucoz5/cneg_na_sait_co/padauchii_cneg/snow1.gif";  

grphcs = new Array(1);  
grphcs[0] = "http://webo4ka.ru/Ucoz5/cneg_na_sait_co/padauchii_cneg/snow1.gif";


вот этим:

Code
Image0 = new Image();  
Image0.src = "http://webo4ka.ru/Ucoz5/cneg_na_sait_co/padauchii_cneg/snow1.gif";  
Image1 = new Image();  
Image1.src = "http://webo4ka.ru/Ucoz5/cneg_na_sait_co/padauchii_cneg/snow2.gif";  
Image2 = new Image();  
Image2.src = "http://webo4ka.ru/Ucoz5/cneg_na_sait_co/padauchii_cneg/snow3.gif";
Image3 = new Image();  
Image3.src = "http://webo4ka.ru/Ucoz5/cneg_na_sait_co/padauchii_cneg/snow4.gif";
Image4 = new Image();  
Image4.src = "http://webo4ka.ru/Ucoz5/cneg_na_sait_co/padauchii_cneg/snow5.gif";
Image5 = new Image();  
Image5.src = "http://webo4ka.ru/Ucoz5/cneg_na_sait_co/padauchii_cneg/snow6.gif";

grphcs = new Array(1);  
grphcs[0] = "http://webo4ka.ru/Ucoz5/cneg_na_sait_co/padauchii_cneg/snow1.gif";  
grphcs[1] = "http://webo4ka.ru/Ucoz5/cneg_na_sait_co/padauchii_cneg/snow2.gif";  
grphcs[2] = "http://webo4ka.ru/Ucoz5/cneg_na_sait_co/padauchii_cneg/snow3.gif";  
grphcs[3] = "http://webo4ka.ru/Ucoz5/cneg_na_sait_co/padauchii_cneg/snow4.gif";  
grphcs[4] = "http://webo4ka.ru/Ucoz5/cneg_na_sait_co/padauchii_cneg/snow5.gif";  
grphcs[5] = "http://webo4ka.ru/Ucoz5/cneg_na_sait_co/padauchii_cneg/snow6.gif";


Вам на выбор дается 6 снежинок








Так же отображать падающий снег на своем сайте, скажем, только зимой. Для этого делаем следующее:

Code
<?if($MONTH$=12 || $MONTH$=1 || $MONTH$=2)?>
тут код скрипта
<?endif?>


Этот пример будет показывать падающий снег только в декабре, январе и феврале.

Приятого Вам использования.
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://SzenProgs.ru
  • Всего комментариев: 2

ADMIN8298
0
ADMIN8298 написал: Написано 27 Декабря 2012 в 21:56
Комментарий №1
можно сделать падающие подарки

Вовчик
0
Вовчик написал: Написано 28 Декабря 2012 в 07:20
Комментарий №2
Можно

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    404
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 8
    Гостей: 7
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: