Nevando en tu página

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 porpiedades como posición X, Y, tamaño, nombre y el objeto DOM qeu representa al copo de nieve. Tiene un método dibujar() para mostrar el copo en la pantalla.

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.

.Para crear un objeto copo (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 la altura de los copos y los mueve hsata llegar al borde inferior. Los resitua en la posición alta del cuadro y vuelve a moverlos. Esta función usa un temporizador para repetir el proceso según el intervalo definido en su último parámetro.

Como lo uso

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

La sección body se asigna el evento load a la función iniNevada(num, vel) con el número de copos que queramos y la rapidez de movimiento.