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.
PASO 2
Ahora vamos a Adobe Dreamweaver y creamos un nuevo documento HTML
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.
PASO 4
Debajo de la etiqueta vamos a copiar el siguiente código html4strict
<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>
PASO 5
Con el comando Ctrl + S vamos a guardar nuestro documento dentro de la carpeta nieve con el nombre nieve.html.
PASO 6
Ahora vamos al menú File – New y creamos un nuevo documento CSS.
PASO 7
Dentro del documento copiamos el siguiente código CSS
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;
}
PASO 8
Con el comando Ctrl + S guardamos nuestro documento dentro de la carpeta CSS con el nombre estilo.css
PASO 9
Dentro de las etiquetas copiamos el siguiente código html4strict.
PASO 10
Listo ya tenemos nuestro efecto de nieve terminado.
Descarga el editable de Efecto de Nieve con 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