Efecto nieve para tu página o el blog

En ciertas ocasiones, sobre todo en temporada navideña, de pronto deseas destacar la presentación de tu blog o la página en la que requieras que se presente un efecto tal como si estuviera nevando.

Para el efecto te facilito el siguiente código en javascript, que espero cumpla las expectativas de lo que requieres.

Necesitas una imagen, la cual te aconsejo de preferencia que sea tipo png, con transparencia en el fondo para evitar que se vea el típico formato de cuadro.

Las instrucciones en el código están modificadas para en caso de que tengas un blog, por ejemplo en Blogger (2017), puedas colocarlo dentro de un gadget. Colocado en un gadget no se presenta ningún problema en la presentacion de la imagen que deseas presentar como nieve, aquí es más fácil y no tienes que tocar la plantilla.

El código es el siguiente:

<script type="text/javascript">
  
var archivonievesrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxXgvPiZAqG4lvRyiDG70VYP1oZkH0yQvYAvx1w5ywqsNjNdIDiaWPMYB_qpnIjUtfA3K0OJlXv283f4E4jit1wVGWmIFeKT_No1Wp71JMdIwi0idt07pTzVhgmOqyCmwCRwJBM-Wp06R_/w140-h140-p/nieve.ico"

var no = 12;

var dx, xp, yp;
var am, stx, sty;
var i, doc_width = 800, doc_height = 600; 
  
if (typeof window.innerWidth != 'undefined')
{
   doc_width = window.innerWidth;
   doc_height = window.innerHeight;
}
else 
if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
{
   doc_width = document.documentElement.clientWidth;
   doc_height = document.documentElement.clientHeight;
}
else
{
   doc_width = document.getElementsByTagName('body')[0].clientWidth;
   doc_height = document.getElementsByTagName('body')[0].clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();

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


      document.write("<div id=\"dot"+ i +"\" style=\"POSITION: fixed; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+archivonievesrc+"' border=\"0\"  width=\"30\" height=\"30\"><\/div>");


}

function HacerNieve() 
{
   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("HacerNieve()", 7);
}

setTimeout("HacerNieve()", 500);

</script>

En la 2da y 3ra líneas de código puedes configurar tus preferencias básicas, como la ubicación del archivo y la cantidad de imágenes que deseas que aparezcan cayendo con el efecto de nieve…

var archivonievesrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxXgvPiZAqG4lvRyiDG70VYP1oZkH0yQvYAvx1w5ywqsNjNdIDiaWPMYB_qpnIjUtfA3K0OJlXv283f4E4jit1wVGWmIFeKT_No1Wp71JMdIwi0idt07pTzVhgmOqyCmwCRwJBM-Wp06R_/w140-h140-p/nieve.ico"

var no = 12;

Puedes variar el número 12 que está predeterminado, para definir la cantidad de copos que deseas que vayan cayendo. (uffff puedes ponerle inclusive un número mayor a 100,… jejeje para una fuerte nevada).

…

Si notas que tu imagen es a lo mejor un poco grande o muy pequeña, podrías cambiar su tamaño en la linea:

document.write("<div id=\"dot"+ i +"\" style=\"POSITION: fixed; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+archivonievesrc+"' border=\"0\" width=\"30\" height=\"30\"><\/div>");

…

Si deseas variar la velocidad de caída de los copos puedes variar el 7 predeterminado, de la línea que está casi al final del código:

snowtimer=setTimeout("HacerNieve()", 7);

Respecto a la ubicación del código después de la etiqueta <body>, esto te hago referencia porque por ejemplo quizás desees presentar el efecto en una página independiente, que no pertenezca a un blog.

NOTA: Recuerda que existen exploradores de quizás no permitan la presentación de ciertos script, para el caso basta con que experimentes. Mmmmm,... además si en este caso no lo acepta, lo unico que podría hacer es no presentarlo, es decir no habría "el efecto de nieve" utilizando dicho explorador.

Quizás también te interese:

Cómo colocar control audio html en una página web

Efecto nieve para tu página o el blog

No hay comentarios.:

Sitios recomendados

Sigue ElectroSYSTEM en: