Loading
carregando...

Colocando efeito de neve no site com javascript


Hoje vamos aprender como colocar um efeito de neve no site, é um efeito muito usado em época de natal e fim de ano.

é muito simples fazer esse efeito, você vai precisar de uma imagem de floco de neve e o script que iremos ver logo abaixo.

DICA: É aconselhável criar uma página .js para colocar nosso script, exemplo: neve.js.
isso fará com que seu script fique mais organizado, e seu HTML bem mais limpo e de fácil compreensão para possíveis alterações, essa dica é somente para se ter um código mais compreensivo.

Bom vamos ao código de nossa página neve.js

  1.  
  2. // JavaScript Document
  3. var snowsrc=window.parent.endereco
  4.  
  5. //how many snowflakes there will be (currently 12)
  6. var no = 40;
  7.  
  8. //How fast will the snow disappear (0 is never)
  9. var hidesnowtime = 0;
  10.  
  11. //The height the snow will reach before it disappears ("windowheight" or "pageheight")
  12. var snowdistance = "pageheight";
  13.  
  14. ///////////////////////////////End of Settings///////////////////////////////////
  15. var ie4up = (document.all) ? 1 : 0;
  16. var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
  17.  
  18. function iecompattest(){
  19.   return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
  20. }
  21.  
  22. var dx, xp, yp;
  23. var am, stx, sty;
  24. var i, doc_width = 800, doc_height = 600;
  25. var parVeri = 0;
  26.  
  27. if (ns6up){
  28.   doc_width = self.innerWidth;
  29.   doc_height = self.innerHeight;
  30. }else if (ie4up){
  31.   doc_width = document.body.clientWidth;
  32.   doc_height = document.body.clientHeight;
  33. }
  34.  
  35. dx = new Array();
  36. xp = new Array();
  37. yp = new Array();
  38. am = new Array();
  39. stx = new Array();
  40. sty = new Array();
  41.  
  42. for (i = 0; i < no; ++ i){
  43.   dx[i] = 0;
  44.   xp[i] = Math.random()*(doc_width-50);
  45.   yp[i] = Math.random()*doc_height;
  46.   am[i] = Math.random()*20;
  47.   stx[i] = 0.02 + Math.random()/10;
  48.   sty[i] = 0.7 + Math.random();
  49.   if (ie4up||ns6up){
  50.       if (i == 0){
  51.         document.write("<a href=\"http://www.darcweb.com.br\" target=\"_blank\"><div id=\"dot"+ i +"\" style=\"position: absolute; z-index: "+ i +"; visibility: visible; top: 0px; left: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div><\/a>");
  52.       }else{
  53.         document.write("<div id=\"dot"+ i +"\" style=\"position: absolute; z-index: "+ i +"; visibility: visible; top: -80px; left: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
  54.       }
  55.   }
  56. }
  57.  
  58. function snowIE_NS6(){
  59.   doc_width = ns6up?window.innerWidth-20 : iecompattest().clientWidth-20;  doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight-300;
  60.  
  61.   for (i = 0; i < no; ++ i){
  62. 	  parVeri++;
  63.       yp[i] += sty[i];
  64.       if (yp[i] > doc_height-50){
  65.         xp[i] = Math.random()*(doc_width-am[i]-30);
  66.         yp[i] = 0;
  67.         stx[i] = 0.02 + Math.random()/10;
  68.         sty[i] = 0.7 + Math.random();
  69.       }
  70.  
  71.       dx[i] += stx[i];
  72. 	  if(parVeri == 2){
  73. 		  document.getElementById("dot"+i).style.top=Number(yp[i])+"px";
  74. 		  document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
  75. 		  //alert(parVeri);
  76. 		  parVeri = 0;
  77. 	  }else{
  78. 		  document.getElementById("dot"+i).style.top=320+Number(yp[i])+"px";
  79. 		  document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
  80. 	  }
  81. 		 // alert(parVeri);
  82.   }
  83.   snowtimer=setTimeout("snowIE_NS6()", 30);
  84. }
  85.  
  86. function hidesnow(){
  87.   if(window.snowtimer){
  88.   	  clearTimeout(snowtimer);
  89.       for (i=0; i<no; i++){
  90. 		 document.getElementById("dot"+i).style.visibility="hidden"
  91. 	  }
  92.   }
  93. }
  94.  
  95. if (ie4up||ns6up){
  96.   snowIE_NS6();
  97.   if (hidesnowtime>0){
  98.      setTimeout("hidesnow()", hidesnowtime*100);
  99.   }
  100. }
  101.  




com nosso script neve.js pronto, primeiramente vamos declarar a variável endereco que será responsável por criar os flocos de neve em nossa index.php ou index.html, vamos declarar da seguinte forma:

  1.  
  2. <script type="text/javascript">
  3. endereco = "http://www.seusite.com.br/flocoNeve.png";
  4. </script>
  5.  



Feito isso logo abaixo da declaração da variável vamos chamar nosso arquivo neve.js em nossa index.php ou index.html da seguinte forma:

  1.  
  2. <script type="text/javascript" src="http://www.seusite.com.br/neve.js"></script>
  3.  



prontinho basta criar uma imagem como floco de neve definir o endereço da imagem na variável endereco, e definir o endereço da página neve.js e pronto, a neve começa a cair no seu site.


CLIQUE AQUI PARA BAIXAR O ARQUIVO ZIPADO - efeitoNeve.zip


vlw galera... tt


Autor: Dárcio Gomes
Data: 17/11/2012 00:00:00