Nevando en tu página

indice de ejemplos

Un efecto curiosos para navidad: una nevada en la página.

Bien se puede hacer con CSS y un fondo animado, pero aprovechamos para usar las clases y obejtos, además del temporizador.

Solución

<script>

class oCopo{

  constructor(tam, id){

     this.x = 0;

     this.y = 0;

     this.size = tam;

     this.nombre = id

     this.obj = document.createElement("div");

     this.obj.setAttribute('id',id);

     this.obj.innerText="*";

     this.obj.style.position = "absolute";

     this.obj.style.fontSize = tam+"px";

     this.obj.style.color = "white";

     document.body.appendChild(this.obj)

}

dibujar(x,y){

     this.x = x;

     this.y = y;

     this.obj.style.top = this.y+"px";

     this.obj.style.left = this.x+"px";

     }

}

function iniCopos(num, anc, alto){

   var copos = new Array(num);

   var tam, x, y;

   for (let i = 0; i<num; i++)

     {

     tam = Math.round(Math.random()*10)+ 8;

     copos[i] = new oCopo(tam, "c"+i);

     x = parseInt(Math.random()*anc);

     y = parseInt(Math.random()*alto);

     copos[i].dibujar(x,y);

     }

return copos;

}

function iniNevada(num, vel)

{

var ancho = document.body.offsetWidth-10;

var alto = window.innerHeight-10;

var losCopos = iniCopos(num, ancho, alto)

nevar(losCopos, ancho,alto, vel);

}

function nevar(copos, coposAncho, coposAlto, vel)

{

var x, y;

for (let i = 0; i < copos.length; i++)

    {

    y = copos[i].y;

x = copos[i].x;

    if (Math.random() > 0.5)

        y += parseInt(Math.random()+1);

    y += parseInt(Math.random()+2);

    if (y >= (coposAlto - copos[i].size))

        {

        y = Math.round(Math.random()*10);

        x =parseInt(Math.random()*coposAncho-1);

        }

copos[i].dibujar(x,y);

    }

setTimeout(nevar, vel, copos, coposAncho, coposAlto, vel);

}

</script>

<body onload="iniNevada(100,80)" style="background:blue">

</body>

Explicación

Se trata del efecto de nevada en la página.

Se crea la clase oCopo, con propiedades como posición X, Y, tamaño, nombre y el objeto DOM que representa al copo de nieve. Tiene un método dibujar() para mostrar el copo en la pantalla.

Aunque hablo de clases recuerda que en Javascript realmente es un objeto generador de objetos. Pero al nombrarlo como clase queda más claro.

El copo es un bloque div con un asterisco en su interior. al crear el objeto copo se crea el elemento div y se añade a l seeción body del documento. PSi quieres puedes ponerle un icono.

Para crear un objeto copo de tipo oCopo (una instancia de la clase oCopo) se necesita solo el tamaño y un identificador.

La función iniNevada(copos, vel) inicia el proceso: crea los copos que indica el primer argumento y luego los moverá en un intervalo de tiempo marcado por el segundo argumento.

Para crear los copos llama a la función iniCopos(num ancho, alto) que se encarga de crear el numero de copos que se necesita (num) y de colocarlos aleatoriamente en la pantalla, en un rectángulo de lados ancho, alto. Devuelve un array con los copos creados.

Una vez tenemos los copos se llama a la función nevar() que modifica la altura de los copos y los mueve hasta llegar al borde inferior. Los resitua en la posición alta del cuadro y vuelve a moverlos. Esta función usa un temporizador (setTimeout)p ara repetir el proceso según el intervalo definido en su último parámetro.

Como lo uso

El cuerpo de la página debe ser oscuro para mostrar los copos que son blancos, puedes modificar este color en el script

A laa sección body se le asigna el evento load con la función iniNevada(num, vel) como gestor del evento, como argumentos de le da el número de copos que queramos y la rapidez de movimiento.