Efecto nevando JQuery

Posteado el 05. Nov, 2010 por tuto in Desarrollo Web, HTML y CSS, Jquery

Iniciamos la época navideña y no nos podíamos quedar atrás vamos a empezar la serie de tutoriales de Navidad. Espermos les sea de su utilidad.

Esto es lo que podrás hacer con este tutorial

PASO 1

Creamos una nueva carpeta llamada nieve dentro de la cual vamos a crear una carpeta nueva llamada imágenes donde vamos a colocar las imágenes que vamos a utilizar para este tutorial.

Efecto Nevando JQuery

PASO 2

Ahora vamos a Adobe Dreamweaver y creamos un nuevo documento HTML

Efecto Nevando JQuery

PASO 3

Ahora vamos a la parte del código y vamos a borrar la línea que se encuentra en la parte superior de nuestro html.

Efecto Nevando JQuery

PASO 4

Debajo de la etiqueta vamos a copiar el siguiente código html4strict

Code block

<link href="css/estilo.css" rel="stylesheet" type="text/css">
 
<script>
 
// Numero de copos, recomendados entre 30 y 40
var nieve_cantidad=60
 
// Colores de los copos se mostraran de forma aleatoria
var nieve_colorr=new Array("#ffffff","#ddddFF","#ccccDD")
 
// Tipo de letra de los copos
var nieve_tipo=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")
 
// Valor o letra de los copos
var nieve_letra="*"
 
// velocidad de caida
var nieve_velocidad=1.0
 
// tamaño mas grande de los copos
var nieve_cantidadsize=30
 
// tamaño mas pequeño de los copos
var nieve_chico=8
 
// 1 toda la pagina - 2 zona izquierda - 3 centro de pagina - 4 zona derecha
var nieve_zona=1
 
var nieve=new Array()
var marginbottom
var marginright
var timer
var i_nieve=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
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) {
rand=Math.floor(range*Math.random())
return rand
}
 
function initnieve() {
if (ie5 || opera) {
marginbottom = document.body.clientHeight
marginright = document.body.clientWidth
}
else if (ns6) {
marginbottom = window.innerHeight
marginright = window.innerWidth
}
var nievesizerange=nieve_cantidadsize-nieve_chico
for (i=0;i<=nieve_cantidad;i++) {
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()
}
 
function movenieve() {
for (i=0;i<=nieve_cantidad;i++) {
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)>(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
}
}
var timer=setTimeout("movenieve()",50)
}
 
for (i=0;i<=nieve_cantidad;i++) {
document.write("<span id='s"+i+"' style='position:absolute;top:-"+nieve_cantidadsize+"'>"+nieve_letra+"</span>")
}
if (browserok) {
window.onload=initnieve
}
</script>

Efecto Nevando JQuery

PASO 5
Con el comando Ctrl + S vamos a guardar nuestro documento dentro de la carpeta nieve con el nombre nieve.html.

Efecto Nevando JQuery

PASO 6
Ahora vamos al menú File – New y creamos un nuevo documento CSS.

Efecto Nevando JQuery

PASO 7
Dentro del documento copiamos el siguiente código CSS

Code block

body {
	background-color: #931f08;
}
#contenido {
	background-color: #931f08;
	background-image: url(../imagenes/fondo.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	height: 553px;
	width: 985px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

Efecto Nevando JQuery

PASO 8
Con el comando Ctrl + S guardamos nuestro documento dentro de la carpeta CSS con el nombre estilo.css

Efecto Nevando JQuery

PASO 9
Dentro de las etiquetas copiamos el siguiente código html4strict.

Code block

<div class="contenido" id="contenido">
  <div align="center"><img src="imagenes/arbol.png" alt="Arbol" width="500" height="500"></div>
</div>

Efecto Nevando JQuery

PASO 10
Listo ya tenemos nuestro efecto de nieve terminado.

Efecto Nevando JQuery

Descarga el editable de Efecto de Nieve con Jquery

Articulos relacionados:

Tags: christmas, CSS, Dreamweaver, jQuery

15 Respuestas para “Efecto nevando JQuery”

Francisco

11. Nov, 2010

Muchas gracias, por tu explicación, tu paciencia y la dedicación para explicar el tema… te ha quedado muy bien, llegué por aquí buscando el código html para los copos de nieve que vi en una web y como loco buscando pero estos no están nada mal, además de que bien explicado, sin duda
tuto

11. Nov, 2010

Que bueno tenerte por aqui Francisco ya sabes que puedes solicitar algun tutorial si lo deseas solo llenando el formulario y esperamos verte por aqui seguido que estamos para servirte
mktmarco

07. Dec, 2010

gracias me sirvio mucho la nieve en mi web, estare visitandote mas seguido para ver tus tutoriales
Julio

17. Dec, 2010

Hola, q buen tuto, pero tengo una rpegunta, como puedo validar q la nieve se ve solo por x dias, digamos hasta el 15 de enero, cuando se pase esa fecha q ya no se vea estwe efecto.. la idea q tengo es poder cambiar el efecto en relacion a la epoca…
Gracias !
Carlos

05. Nov, 2011

Excelente post… y muy buen trabajo de tu parte… pero … no veo el jquery por ningun lado….
Pero igual te quedo muy padre….
Carlos

05. Nov, 2011

Una pregunta, por que hay que quitar la linea del DOCTYPE del HTML…..
Gildus

01. Dec, 2011

Aqui no hay nada de jquery…. Pero es un buen tutorial…xD
Jorhel

01. Dec, 2011

Esto no tiene que ver con jquery, es un codigo bastante viejo. igual me sirve, gracias.
webmaster

20. Dec, 2011

Porque toca quitar el tag del DOCTYPE ??? el problema es que el código no valida y es importantisimo. Hay alguna solución para este problema?

Veo que ya preguntaron lo mismo y no hubo una respuesta concreta. ?????
Cesar

28. Sep, 2012

Que buen tutorial, solo una pregunta, como se le haria para en vez de que fuera un string el copo, fuera una imagen por ejemplo?

Saludos
@pacho911

22. Nov, 2012

Hola, asi com esta me funciona en ie9 apra abajo, de apra rriba no, se ven conflictos con el doctype, y no usas jquery,e xisgte con jquery, mejorado, par all browser??
Webi

24. Nov, 2012

Gracias por la observación si gustas puedes enviarnos tus comentarios para postearlo con los arreglos y con gusto te damos tus créditos gracias por el aporte
Eduardo

05. Dec, 2012

Como se cambia el código para que se vea en Chrome??? Ya hice toooo lo que pides y se ve en casi todos los browsers excepto Chrome. Ayuditaaaaaaa pls
bigg

10. Dec, 2012

Buen tutorial, yo les quiero compartir los copos que encontre, para que se vea mas original ❅ ❄ ❆ . Saludos
Webi

17. Dec, 2012

Gracias por compartir con nosotros

Tutoriales en la Web