Советы, трюки и секреты для Blogger.com блоггеров. Все для Blogspot. Советы, трюки и секреты для Blogger.com блоггеров. Все для Blogspot.

Зимние украшение для сайта или блога, падающий снег

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

Кому не терпится посмотреть в действии падение снежинок на блоге blogspot смотрите тут.

Для установки анимации или скрипта, нам будет необходимо  просто вставить код если у вас обычный сайт.

<div onclick="stopsnow()" id="snow-start">Выкл. снег</div>
<script type="text/javascript"> 
  var snowsrc="http://all-blogspot.com/blog/img/snow.png";
  var no = 20; 
  var log = 0;
  var hidesnowtime = 0;
  var snowdistance = "windowheight";

  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();
  snowsrc=(snowsrc.indexOf("all-blogspot.com")!= 1)? "http://all-blogspot.com/blog/img/snow.png" : snowsrc
  for (i = 0; i < no; ++ i) {  
    dx[i] = 0;                        
    xp[i] = Math.random()*(doc_width-50); 
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20;      
    stx[i] = 0.02 + Math.random()/10;
    sty[i] = 0.7 + Math.random();   
        if (ie4up||ns6up) {
      if (i == 0) {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: fixed; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
      } else {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: fixed; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
      }
    }
  }

  function snowIE_NS6() {  
    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("dot"+i).style.top=yp[i]+"px";
      document.getElementById("dot"+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("dot"+i).style.visibility="hidden";
    }

if (ie4up||ns6up){
    snowIE_NS6();
        if (hidesnowtime>0)
        setTimeout("hidesnow()", hidesnowtime*1000);
        }
 function stopsnow(){
 if (log==0){
  for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden";
  no = 0;
  log = 1;
  document.getElementById('snow-start').innerHTML ='Вкл. снег';
  }
  else { log = 0; no = 20; for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="visible";
 document.getElementById('snow-start').innerHTML ='Выкл. снег';

  }

 }
</script>
<a id="copy" href="http://all-blogspot.com/"></a>
<style>
#snow-start{
background: rgba(27, 25, 25, 0.4);
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
cursor: pointer;
line-height: 25px;
position: fixed;
right: 0px;
top: 0px;
border-radius: 0px 0px 0px 9px;
}
#copy{
color: rgba(20, 16, 16, 0);
font-size: 7px;
position: fixed;
text-decoration: none;
top: 24px;
right: 2px;
}
</style>

Если у вас блог на Blogger.com перейдите в настройки блога Дизайн - Добавить гаджет -  HTML/JavaScript.   Вот и все пишите в комментарии о результатах публикуйте свои ссылки на блоги. Вступайте в группу ЭВМщик - помощь blogger'у

20 января 2014, 15:10