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

Imágen de perfil

Efecto nieve con JavaScript y CSSgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(5)
Actualizado el 23 de Mayo del 2016 por Xavi (Creado el 06 de Junio del 2014)
7.829 visualizaciones desde el 06 de Junio del 2014. Una media de 63 por semana
Código que muestra como con javascript y css podemos hacer el efecto nieve, donde se visualizan copos bajando por la pantalla

Versión 1
estrellaestrellaestrellaestrellaestrella(5)

Actualizado el 15 de Junio del 2016 (Creado el 06 de Junio del 2014)gráfica de visualizaciones de la versión: Versión 1
7.830 visualizaciones desde el 06 de Junio del 2014. Una media de 63 por semana
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)

CanoRioss
08 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
Xavi
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

http://lwp-l.com/s2688