SprintDevelop.com - Diseño y desarrollo web - Diseño, desarrollo web,Aplicaciones Móviles, TabletasSprintDevelop.com - Diseño y desarrollo web
Mostrando Codigo - Javascript
Code

Javascript - Efecto copos de nieve para todos los navegadores (cross browser)

Códigos Javascript

El ejemplo muestra un efecto o copos de nieve compatibles con todos los navegadores o cross browser.
Visitas: 128,483 - 29-11-2007 21:18:41
DemoNO CONTIENE ARCHIVO DESCARGABLEComentario
CODIGO
Codigo probado en ChromeCodigo probado en Mozilla FirefoxCodigo probado en Internet Explorer 7+Codigo probado en OperaCodigo probado en Safari


# Codigo ofrecido por Tutores.org

  1. <html>
  2. <head>
  3. </head>
  4. <script>
  5.  
  6. // Numero de copos, recomendados entre 30 y 40
  7. var nieve_cantidad=35
  8.  
  9. // Colores de los copos se mostraran de forma aleatoria
  10. var nieve_colorr=new Array("#aaaacc","#ddddFF","#ccccDD")
  11.  
  12. // Tipo de letra de los copos
  13. var nieve_tipo=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")
  14.  
  15. // Valor o letra de los copos
  16. var nieve_letra="*"
  17.  
  18. // velocidad de caida
  19. var nieve_velocidad=0.6
  20.  
  21. // tamaño mas grande de los copos
  22. var nieve_cantidadsize=30
  23.  
  24. // tamaño mas pequeño de los copos
  25. var nieve_chico=8
  26.  
  27. // 1 toda la pagina - 2 zona izquierda - 3 centro de pagina - 4 zona derecha
  28. var nieve_zona=1
  29.  
  30. var nieve=new Array()
  31. var marginbottom
  32. var marginright
  33. var timer
  34. var i_nieve=0
  35. var x_mv=new Array();
  36. var crds=new Array();
  37. var lftrght=new Array();
  38. var browserinfos=navigator.userAgent
  39. var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
  40. var ns6=document.getElementById&&!document.all
  41. var opera=browserinfos.match(/Opera/)  
  42. var browserok=ie5||ns6||opera
  43.  
  44. function aleatorio(range) {    
  45.     rand=Math.floor(range*Math.random())
  46.     return rand
  47. }
  48.  
  49. function initnieve() {
  50.     if (ie5 || opera) {
  51.         marginbottom = document.body.clientHeight
  52.         marginright = document.body.clientWidth
  53.     }
  54.     else if (ns6) {
  55.         marginbottom = window.innerHeight
  56.         marginright = window.innerWidth
  57.     }
  58.     var nievesizerange=nieve_cantidadsize-nieve_chico
  59.     for (i=0;i<=nieve_cantidad;i++) {
  60.         crds[i] = 0;                      
  61.         lftrght[i] = Math.random()*15;        
  62.         x_mv[i] = 0.03 + Math.random()/10;
  63.         nieve[i]=document.getElementById("s"+i)
  64.         nieve[i].style.fontFamily=nieve_tipo[aleatorio(nieve_tipo.length)]
  65.         nieve[i].size=aleatorio(nievesizerange)+nieve_chico
  66.         nieve[i].style.fontSize=nieve[i].size
  67.         nieve[i].style.color=nieve_colorr[aleatorio(nieve_colorr.length)]
  68.         nieve[i].sink=nieve_velocidad*nieve[i].size/5
  69.         if (nieve_zona==1) {nieve[i].posx=aleatorio(marginright-nieve[i].size)}
  70.         if (nieve_zona==2) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)}
  71.         if (nieve_zona==3) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/4}
  72.         if (nieve_zona==4) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/2}
  73.         nieve[i].posy=aleatorio(2*marginbottom-marginbottom-2*nieve[i].size)
  74.         nieve[i].style.left=nieve[i].posx
  75.         nieve[i].style.top=nieve[i].posy
  76.     }
  77.     movenieve()
  78. }
  79.  
  80. function movenieve() {
  81.     for (i=0;i<=nieve_cantidad;i++) {
  82.         crds[i] += x_mv[i];
  83.         nieve[i].posy+=nieve[i].sink
  84.         nieve[i].style.left=nieve[i].posx+lftrght[i]*Math.sin(crds[i]);
  85.         nieve[i].style.top=nieve[i].posy
  86.        
  87.         if (nieve[i].posy>=marginbottom-2*nieve[i].size || parseInt(nieve[i].style.left)>(marginright-3*lftrght[i])){
  88.             if (nieve_zona==1) {nieve[i].posx=aleatorio(marginright-nieve[i].size)}
  89.             if (nieve_zona==2) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)}
  90.             if (nieve_zona==3) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/4}
  91.             if (nieve_zona==4) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/2}
  92.             nieve[i].posy=0
  93.         }
  94.     }
  95.     var timer=setTimeout("movenieve()",50)
  96. }
  97.  
  98. for (i=0;i<=nieve_cantidad;i++) {
  99.     document.write("<span id='s"+i+"' style='position:absolute;top:-"+nieve_cantidadsize+"'>"+nieve_letra+"</span>")
  100. }
  101. if (browserok) {
  102.     window.onload=initnieve
  103. }
  104. </script>
  105. <body bgcolor="#333"><br>
  106. <br>
  107.  
  108. <div style='width:100%;height:500px;background-color:#666666;color:#339900;'>Contenido de la pagina</div>
  109. </body>
  110. </html>



ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo
<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Efecto copos de nieve para todos los navegadores (cross browser)" href="http://www.tutores.org/codigo/1841/" target="_blank">Efecto copos de nieve para todos los navegadores (cross browser)</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Comentario usuario
01-12-2007 02:22:42
1 5
Muy bonito pero hace que la pc se ponga muy lenta y los SWF tambien
Comentario usuario
Shock
5 5
muy bueno solo que tengo una duda como puedo hacer que aparesca encima de los .swf no se por que no lo hace encima de estos espero tu respuesta
Comentario usuario
05-03-2009 02:29:09
3 5
me sale el siguiente error
**Error** Escena=Escena 1, capa=Capa 1, fotograma=1:Línea 1: Se ha detectado un '<' inesperado
<html>

**Error** Escena=Escena 1, capa=Capa 1, fotograma=1:Línea 3: El operador '>' debe ir seguido de un operando
</head>

**Error** Escena=Escena 1, capa=Capa 1, fotograma=1:Línea 7: El operador '>' debe ir seguido de un operando
var nieve_cantidad=35

**Error** Escena=Escena 1, capa=Capa 1, fotograma=1:Línea 39: El operador '!' debe ir seguido de un operando
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)

**Error** Escena=Escena 1, capa=Capa 1, fotograma=1:Línea 40: Se espera ')' o ','
var ns6=document.getElementById&&!document.all

**Error** Escena=Escena 1, capa=Capa 1, fotograma=1:Línea 41: Se ha detectado un '/' inesperado
var opera=browserinfos.match(/Opera/)

**Error** Escena=Escena 1, capa=Capa 1, fotograma=1:Línea 42: Se espera ')' o ','
var browserok=ie5||ns6||opera

**Error** Escena=Escena 1, capa=Capa 1, fotograma=1:Línea 104: Se ha detectado un '<' inesperado
</script>

**Error** Escena=Escena 1, capa=Capa 1, fotograma=1:Línea 105: Error de sintaxis.
<body bgcolor="#333"><br>

**Error** Escena=Escena 1, capa=Capa 1, fotograma=1:Línea 108: El operador '>' debe ir seguido de un operando
<div style='width:100%;height:500px;background-color:#666666;color:#339900;'>Contenido de la pagina</div>

**Error** Escena=Escena 1, capa=Capa 1, fotograma=1:Línea 109: El operador '<' debe ir seguido de un operando
</body>

**Error** Escena=Escena 1, capa=Capa 1, fotograma=1:Línea 110: El operador '<' debe ir seguido de un operando
</html>

Total de errores de ActionScript: 12 Errores comunicados: 12
Comentario usuario
Aimbox
1 5
alguna imagen ?? para aimbox.cl
Comentario usuario
18-07-2007 14:01:05
4 5
gracias!!!!!!!!!
me salvaste
muy bonito
Comentario usuario
Sin definir
3 5
muchas gracias!! anda perfecto, busque mucho este codigo y no me andaba, pero este anda de 10!
saludos ;)
lorenzo
Comentario usuario
20/03/2004 1.44.46
2 5
como le hago para ke aparesca en toda la pantalla este codigo navideño aparecen pero ala mitad de mi pagina se desaparecen como hago para caigan hasta el final de mi pagina

esta es mi page
http://tuxtlaclik.mx.kz/
Comentario usuario
25-07-2010 22:12:21
5 5
Este no funciona en firefox,solo en los demas, lastina por las zorras, jeje
Comentario usuario
eMaTriKs
2 5
Si quereis diferentes fondos para poner en vuestra web, copitos, asterisco, manuales, swf, etc.. Entra en eMaTriKs.eS y descubre las diferentes formas de conseguirlo.

El registro es obligatorio para ver todas las secciones del foro.

Un saludo a tod@s!
Comentario usuario
buscador
4 5
yea codigo muy padre

hasta que encontre uno que funcione para todos

grax compa

http://manualitos.mforos.com
Comentario usuario
ming
2 5
Os mando un script que funciona en todos los navegadores y crea el efecto nieve, ponedlo al final del todo:


<script type="text/javascript">

//Configure below to change URL path to the snow image
var snowsrc="snow.gif"
// Configure below to change number of snow to render
var no = 8;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 10;
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

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; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
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("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><a href="http://dynamicdrive.com"><img src='"+snowsrc+"' border="0"></a></div>");
} else {
document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><img src='"+snowsrc+"' border="0"></div>");
}
}
}

function snowIE_NS6() { // IE and NS6 main animation function
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) { // iterate for every dot
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)
}

</script>
Comentario usuario
•SaN•
1 5
Buenas,
excelente el script!!!...
era lo q buskba muchisimas gracias :).
Ade+ muy bien aclarados todos los puntos...

Ty so much ;),
Atte Santÿ.
Comentario usuario
ciudadlrdo.com
1 5
Hey muchas graciaspor el codigo esta muy buey me orrio maravilla sino mren ciudadlrdo.com
Comentario usuario
vianney
2 5
que bonito¡¡ esta buenisimo el código, muchas gracias y feliz navidad¡
Comentario usuario
Checharami
4 5
Este Script es justo lo que buscaba funciona muy bien felicitaciones, me a funcionado super bien solo quiero hacer una aclaración el script no funciona si no borramos la etiqueta

<html xmlns="http://w3.org/1999/xhtml" xml:lang="en" >

que esta al principio de nuestro html pero por lo demas funciona super bien.
Comentario usuario
22-09-2008 20:39:55
5 5
me encanta vuestro script, pero tengo un pequeño problemilla, cuando lo incorporo a mi web me anula unos desplegables, los cuales utilizo para navegar por mi web.

Espero una ayudita
Comentario usuario
Crisalbert
5 5
Ahora que tengo el código donde tengo que ponerle.
Comentario usuario
QAOS
5 5
NO ME SIRVIO EN FIREFOX SALUDOS
Comentario usuario
Tortu
5 5
Mira a mi no me anda sobre, los div. alguna manera de que pase sobre? Probe por posicion y no se pudo.
Comentario usuario
Ryyky
5 5
Una pregunta (= No se en donde se pone el codigo XD
Comentario usuario
Moises
3 5
me gusto!! :D funciona! gracias viejo
... oye, mi pagina es bastante larga, y el efecto de los copos de nieve no sale hasta el final de la página... ayuda por favor, quiero que salga en toda la pagina. Es decir que los copos caigan hasta el final de la pagina.. ayuda si es posible, gracias!
Comentario usuario
neohitokiri
2 5
Aplicando buenas prácticas de programación el script final quedaría:


// Variable para Iteración
var i = 0;

// Número de copos, recomendados entre 30 y 40
var nieve_cantidad = 35;

// Colores de los copos (se mostrarán de forma aleatoria)
var nieve_colorr = ['#aabacc', '#ddedFF', '#ccdcDD'];

// Tipo de letra de los copos
var nieve_tipo = ["Arial Black", "Arial Narrow", "Times", "Comic Sans MS"];

// Valor o letra de los copos
var nieve_letra = "*";

// velocidad de caída
var nieve_velocidad = 0.6;

// tamaño más grande de los copos
var nieve_cantidadsize = 30;

// tamaño más pequeño de los copos
var nieve_chico = 8;

// 1 toda la pagina - 2 zona izquierda - 3 centro de página - 4 zona derecha
var nieve_zona = 1;

var nieve = [];
var marginbottom;
var marginright;
var timer;
var i_nieve = 0;
var x_mv = [];
var crds = [];
var lftrght = [];
var browserinfos = navigator.userAgent;
var ie5 = document.all && document.getElementById && !browserinfos.match(/Opera/);
var ns6 = document.getElementById && !document.all;
var opera = browserinfos.match(/Opera/);
var browserok = ie5 || ns6 || opera;

function aleatorio(range) {
"use strict";
var rand = Math.floor(range * Math.random());
return rand;
}

function movenieve() {
"use strict";
var i, timer;
for (i = 0; i <= nieve_cantidad; i += 1) {
crds[i] += x_mv[i];
nieve[i].posy += nieve[i].sink;
nieve[i].style.left = nieve[i].posx + lftrght[i] * Math.sin(crds[i]);
nieve[i].style.top = nieve[i].posy;

if (nieve[i].posy >= marginbottom - 2 * nieve[i].size || parseInt(nieve[i].style.left, 10) > (marginright - 3 * lftrght[i])) {
if (nieve_zona === 1) {nieve[i].posx = aleatorio(marginright - nieve[i].size); }
if (nieve_zona === 2) {nieve[i].posx = aleatorio(marginright / 2 - nieve[i].size); }
if (nieve_zona === 3) {nieve[i].posx = aleatorio(marginright / 2 - nieve[i].size) + marginright / 4; }
if (nieve_zona === 4) {nieve[i].posx = aleatorio(marginright / 2 - nieve[i].size) + marginright / 2; }
nieve[i].posy = 0;
}
}
timer = setTimeout(movenieve, 50);
}

function initnieve() {
"use strict";
var i, nievesizerange = nieve_cantidadsize - nieve_chico;
if (ie5 || opera) {
marginbottom = document.body.clientHeight;
marginright = document.body.clientWidth;
} else if (ns6) {
marginbottom = window.innerHeight;
marginright = window.innerWidth;
}
for (i = 0; i <= nieve_cantidad; i += 1) {
crds[i] = 0;
lftrght[i] = Math.random() * 15;
x_mv[i] = 0.03 + Math.random() / 10;
nieve[i] = document.getElementById("s" + i);
nieve[i].style.fontFamily = nieve_tipo[aleatorio(nieve_tipo.length)];
nieve[i].size = aleatorio(nievesizerange) + nieve_chico;
nieve[i].style.fontSize = nieve[i].size;
nieve[i].style.color = nieve_colorr[aleatorio(nieve_colorr.length)];
nieve[i].sink = nieve_velocidad * nieve[i].size / 5;
if (nieve_zona === 1) {nieve[i].posx = aleatorio(marginright - nieve[i].size); }
if (nieve_zona === 2) {nieve[i].posx = aleatorio(marginright / 2 - nieve[i].size); }
if (nieve_zona === 3) {nieve[i].posx = aleatorio(marginright / 2 - nieve[i].size) + marginright / 4; }
if (nieve_zona === 4) {nieve[i].posx = aleatorio(marginright / 2 - nieve[i].size) + marginright / 2; }
nieve[i].posy = aleatorio(2 * marginbottom - marginbottom - 2 * nieve[i].size);
nieve[i].style.left = nieve[i].posx;
nieve[i].style.top = nieve[i].posy;
}

movenieve();
}

for (i = 0; i <= nieve_cantidad; i += 1) {
/*jslint evil: true */
document.write("<span id='s" + i + "' style='position:absolute;top:-" + nieve_cantidadsize + "'>" + nieve_letra + "</span>");
}

if (browserok) {
window.onload = initnieve;
}


El código puede ser guardado en un archivo llamado "efectoNieve.js" y ejecutado desde el archivo html que se quiera colocando en medio de los tags <head> y </head> la siguiente línea:

<script type="text/javascript" src="efectoNieve.js"></script>
Comentario usuario
10-06-2010 23:39:40
3 5
Excelente aporte, sin importar la antigüedad. Gracias.
INSERTAR COMENTARIO

Usuario:
Email:
Comentario:
Codigo Seguridad

Antes de enviar un comentario...
Todos los comentarios son revisados personalmente
Todo comentario que no haga relacion al codigo mostrado en esta pagina sera eliminado
Usuarios registrados tienen preferencia en recibir respuestas de ayuda!!
Ademas de poder insertar Imagenes,Enlaces y otras propiedades del editor.
Por favor, insertar los comentarios descriptivos.