menú
¿Música de YouTube sin molestos comerciales? ¡Ahora es posible!
TubeFiesta es una aplicación que te permite reproducir música de YouTube como un reproductor tradicional.
Crear listas, reproducción aleatoria, repetir, y hasta exportar el video a otra pantalla.
Conocer más Ir a tfiesta.com

Lluvia de colores con JQuery

Publicado el 25/07/2014 | 1432 visitas

Empezaré a realizar algunos ejercicios prácticos con la finalidad de enseñar a crear contenido para Internet. En esta oportunidad quise hacer un pequeño Script que creara elementos aleatorios en una pantalla e hiciera una animación hacia la parte inferior de la misma para simular una Lluvia de colores. Veamos...

lluvia de colores jquery

En la imagen anterior se aprecia nuestro resultado final, este podrán modificarlo y crear algo mucho más agradable a la vista, veamos el código.

Entendiendo el código

Al inicio tenemos variables para configurar el comportamiento del script:

  • var size = 3;: Tamaño en pixeles de cada "gota de lluvia".
  • var startPos = -1;: Posición inicial de cada una de ellas en la parte superior del documento HTML.
  • var colors = new Array("red", "yellow", "blue");: Colores de cada elemento aleatoriamente.
  • var speed = 20000;: Técnicamente, cuanto tarda un elemento en recorrer todo el documento (en milisegundos).
  • var cantidad = 500;: Técnicamente, cada cuantos milisegundos se crea un nuevo elemento. Mientras menor sea el valor más "gotas" habrán en pantalla.

Se crea un timer para crear elementos span que serán cada una de las "gotas", se genera un random del color (para seleccionar uno de los configurados) y se captura el alto y ancho del documento HTM.

Posteriormente se crea el elemento y se configuran las variables de estilo mediante el método "css" de jQuery. Al final se inicia la animación desde la parte superior hasta el final del documento y se añade al DOM.

Observar que al finalizar la animación se elimina el elemento para no llenar la memoria de basura.

Entendiendo esto podemos empezar a jugar con las variables de configuración o a mover un poco el código, por ejemplo, bajemos la velocidad (speed) a 2000 milisegundos y quitaremos la propiedad "linear" de la animación... así tendremos una excelente cascada.

Los invito entonces a practicar y a sacarle otros efectos a este trozo de código como el efecto de flashes de cámara fotográfica que también espero sea de enseñanza para muchos. Nos vemos!

Talvez te interese...

[Truco] Contar caracteres en Google Chrome
Mejora la primera impresión con una WebFont
Crear un Wizard con AngularJS
Flashes de cámara con JQuery
blog comments powered by Disqus