» »

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


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

Вот подходят праздники новогодний и нужно чем то украсить сайт и здесь падающий снег отлично подойдет. Все очень просто и сделано очень красиво, это не будут большие хлопья, а небольшие снежинки, которые начнут лететь с верх сайта и до самого низа. Расстояние у них будет уже запрограммированные, где то много а где то мало. Вообщем сделано так, чтоб ближе к реальному было.

Установка:

Вверх сайта в потолок:
Код

<script LANGUAGE='JavaScript1.2'>  
<!-- Begin  
  if ((document.getElementById) && window.addEventListener || window.attachEvent)  

  {(function()  

  {  
  var num = 30;  
  var timer = 30;  
  var enableinNS6 = 1;  

  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;  

  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>');  
  currStep[i] = 0;  
  fall[i] = (sfs[i] == 1)?Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);  
  step[i] = (sfs[i] == 1)?0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05;  

  }  
  if (domWw) r = window;  
  else {  
  if (d.documentElement && typeof d.documentElement.clientWidth == 'number' &&  
  d.documentElement.clientWidth != 0) r = d.documentElement;  
  else {  
  if (d.body && typeof d.body.clientWidth == 'number') r = d.body;  
  }  
  }  

  function winsize() {  

  var oh,sy,ow,sx,rh,rw;  
  if (domWw) {  
  if (d.documentElement && d.defaultView && typeof d.defaultView.scrollMaxY == 'number') {  
  oh = d.documentElement.offsetHeight;  
  sy = d.defaultView.scrollMaxY;  
  ow = d.documentElement.offsetWidth;  
  sx = d.defaultView.scrollMaxX;  
  rh = oh-sy;  
  rw = ow-sx;  
  }  
  else {  
  rh = r.innerHeight;  
  rw = r.innerWidth;  
  }  
  h = rh - 2;  
  w = rw - 2;  

  }  
  else{  

  h = r.clientHeight - 2;  
  w = r.clientWidth - 2;  
  }  
  }  

  function scrl(yx) {  

  var y,x;  
  if (domSy) {  
  y = r.pageYOffset;  
  x = r.pageXOffset; }  

  else {  

  y = r.scrollTop;  
  x = r.scrollLeft;  

  }  

  return (yx == 0)?y:x;  

  }  

  function snow() {  

  var dy,dx;  
  for (i = 0; i < num; i++) {  

  dy = fall[i];  
  dx = fall[i] * Math.cos(currStep[i]);  
  y[i]+=dy;  
  x[i]+=dx;  
  if (x[i] >= w || y[i] >= h) {  

  y[i] = -10;  
  x[i] = Math.round(Math.random() * w);  
  fall[i] = (sfs[i] == 1)?Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);  
  step[i] = (sfs[i] == 1)?0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;  
  }  

  theFlakes[i].top = y[i] + scrl(0) + pix;  
  theFlakes[i].left = x[i] + scrl(1) + pix;  
  currStep[i]+=step[i];  

  }  

  setTimeout(snow,timer);  

  }  

  function init() {  

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

  theFlakes[i] = document.getElementById('flake'+(idx+i)).style;  
  y[i] = Math.round(Math.random()*h);  
  x[i] = Math.round(Math.random()*w);  

  }  

  snow();  

  }  

  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);  

  }  

  })();  
  }  
// End -->  
</script>


Проверен код и работает просто отлично.
Источник: Passagestalker.3dn.ru
05.12.2015 Просмотров: 467 Комментарий: (3)

Поделиться в социальных сетях

Материал разместил

Комментарий: 3
Kvint
Kvint 05.12.2015 22:161
0
Какой то снег мелкий пошел, раньше понимаю, зайдешь не чего не видно, выключаешь, а здесь предется оставаться.
ZruBkul
ZruBkul 05.12.2015 22:192
0
Все правильно, для этого и сделали, просто не понимаю, почему раньше до этого не догадались. Сейчас можно сделать и в одной шапке, для светлых сайтов дорогу к снегопаду открыли.
Kosten
Kosten 05.12.2015 22:213
0
Но а почему бы и нет, что он мелкий, это для пользователя, чтоб глаз не мозолил. Вот не знаю его можно как то регулировать, не смотрел, просто поставил на темный дизайн, чтоб увидеть, на тему, чтоб весь сайт захватил а не где то там с боку идет, здесь все нормально.
avatar