Código de JavaScript - Efecto nieve con JavaScript y CSS

Versión 1
estrellaestrellaestrellaestrellaestrella(5)

Actualizado el 15 de Junio del 2016 (Publicado el 6 de Junio del 2014)gráfica de visualizaciones de la versión: Versión 1
27.815 visualizaciones desde el 6 de Junio del 2014
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puedes ver un ejemplo aquí
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<html>
<head>
    <title>Efecto nieve con JavaScript y CSS</title>
    <style>
        /* valores genericos para los copos */
        .copo {
            background-color: #00f;
            color:#fff;
            position:relative;
            z-index:0;
        }
        /* definimos los 4 tipos de copos */
        .copo1 {
            height:1px;
            width:1px;
        }
        .copo2 {
            height:2px;
            width:2px;
        }
        .copo3 {
            height:3px;
            width:3px;
            border-radius:2px;
        }
        .copo4 {
            height:4px;
            width:4px;
            border-radius:3px;
        }
    </style>
    <script>
        var anchuraMax=0;
        var alturaMax=0;
        var copos=new Array;
 
        /**
         * Funcion inicial
         * Tiene que recibir:
         *  numeroCopos a mostrar
         *  anchura y altura por donde aparecen los copos
         *  velocidad de movimiento de los mismos
         */
        function inicializar(numeroCopos, anchura, altura, velocidad)
        {
            var i, x, y;
            copos = new Array(numeroCopos);
            for (i = 0; i<numeroCopos; i++)
            {
                x = parseInt(Math.random()*anchura);
                y = parseInt(Math.random()*altura);
                dibujaCopo(i,x,y);
                copos[i] = document.getElementById("c"+i);
            }
            alturaMax = altura;
            anchuraMax = anchura;
            setInterval(nevar, velocidad);
        }
 
        // Función inicial que dibuja los copos en la pantalla
        function dibujaCopo(numeroCopo, x, y)
        {
            var tamano = Math.floor(Math.random()*4)+1;
            document.write('<div id="c'+numeroCopo+'" class="copo copo'+tamano+'" style="left:'+x+'px; top:'+y+'px;"></div>');
        }
 
        // Función que controla el movimiento de los copos por la pantalla
        function nevar()
        {
            var i, x, y;
            for (i = 0; i < copos.length; i++)
            {
                // cogemos las posiciones de cada elemento
                y = parseInt(copos[i].style.top);
                x = parseInt(copos[i].style.left);
 
                y+=Math.floor(Math.random()*4)+1;
                copos[i].style.top = y;
 
                // si ha llegado al final de la pantalla
                if(y>document.body.scrollTop+alturaMax)
                {
                    // posicionamos nuevamente en la parte superior
                    copos[i].style.top = document.body.scrollTop-(Math.round(Math.random()*10)+1);
                    // cogemos una posicion horizontal aleatoria
                    copos[i].style.left=parseInt((Math.random()*anchuraMax)+1);
                }
            }
        }
    </script>
 
</head>
 
<body>
<h1>Efecto nieve con JavaScript y CSS</h1>
 
<script>
inicializar(50, 400, 300, 100, 100, 50);
</script>
 
</body>
</html>



Comentarios sobre la versión: Versión 1 (5)

Imágen de perfil
8 de Junio del 2014
estrellaestrellaestrellaestrellaestrella
Bien, si le ponemos el color blanco ó una imagen al copo quedará excelente!!
Muy buen aporte, lo usaré el proximo diciembre hehe saludos!!
Responder
antonio
17 de Diciembre del 2014
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
antonio
17 de Diciembre del 2014
estrellaestrellaestrellaestrellaestrella
gracias
Responder
daniel gonzalez
22 de Mayo del 2016
estrellaestrellaestrellaestrellaestrella
ERROR DE SINTAXIS EN LA LINEA 64.... si vamos a hacer algo hagamoslo bien... sino no gastemos tiempo y no le hagamos perder tiempo a la gente... es mas, solo para poner unos puntitos azules en la pantalla tanto código?... NO FUNCIONA NI TU EJEMPLO... saludos...

PD: Si programas asi... pobre de los que contratan tus servicios...
Responder
Imágen de perfil
23 de Mayo del 2016
estrellaestrellaestrellaestrellaestrella
Lo he probado y me ha funcionado perfectamente!!!

Estaría bien que publicaras alguno de tus códigos!!
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2688