Main menu

Crea un efecto lluvia con JavaScript

¡Cómo avanza la tecnología! Quién iba a decir que a estas alturas podríamos llegar a crear lluvia a nuestro antojo. ¿No te lo crees? Déjame primero que te presente a rainyday.js y verás qué poder tiene JavaScript.

Quién no ha sido pupilo de aquellos abuelos, que compartiendo su sabiduría acumulada en años de experiencia, nos deleitan con refranes del tipo “Por mayo llueve a rayos” o “Hasta el 40 de mayo no te quites el sayo”... Sin duda que son dichos populares con bases ciertas, pero sinceramente, este pasado mes de mayo no se ha cumplido ni de cerca.

Si eres de los que disfruta viendo llover desde la ventana, Rainyday te hará olvidar estos odiosos días de sol.

Rainyday.js es una biblioteca JavaScript que hace uso del elemento canvas de HTML5 para hacer la animación de unas gotas de lluvia cayendo sobre la superficie de un cristal.

¿Qué necesitamos?

Preparando el terreno

En nuestro html hay que llamar el fichero JavaScript que acabamos de descargar.

 <script src="js/rainyday.js"></script>

 El HTML

Necesitamos que al cargar la página se ejecute la función que nos crea la lluvia y una imagen de fondo a la que dejaremos el atributo src vacío de momento.

<body onload="quellueva();">
     <img id="background" alt="background" src="" />
</body>

 Empieza la acción

Vamos a invocar la lluvia creando la función quellueva. 

function quellueva() {
     var image = document.getElementById('background');
     image.onload = function() {
          var engine = new RainyDay({
               image: this,
               blur: 10,
               opacity: 1,
               gravityAngle: Math.PI / 2,
               gravityAngleVariance: 0
          });
          engine.gravity = engine.GRAVITY_NON_LINEAR;
          engine.trail = engine.TRAIL_SMUDGE;
          engine.rain([ 
               [0, 3, 8], 
               [3, 8, 1]
          ], 50);
      };
      image.crossOrigin = 'anonymous';
      image.src = 'images/bg.jpg';
}

 Parámetros personalizados

  • blur: valor numérico que indica la cantidad de desenfoque aplicada a la imagen de fondo

  • opacity: valor del 0 al 1 que indica la opacidad de las gotas de agua

  • gravityAngle: simula el viento modificando el ángulo con el que caen las gotas

  • gravityAngleVariance: añade cierta aleatoriedad a la caída de las gotas

  • engine.trail: configura el rastro que deja la gota al caer. Puede tener tres valores: engine.TRAIL_NONE (las gotas de lluvia no dejan rastro mientras caen), engine.TRAIL_SMUDGE (forma una linea de agua) o engine.TRAIL_DROPS (deja un rastro de pequeñas gotas)

  • engine.gravity: configura el movimiento de la caída de la gota. Puede tener dos valores: engine.GRAVITY_LINEAR; (la gota cae a una velocidad constante) y engine.GRAVITY_NON_LINEAR (la gota cae con cierta aceleración).

  • engine.rain: este módulo configura la cantidad y el tamaño de las gotas que caerán. En este ejemplo se han configurado dos tipos de gotas: [0,3,8] indica que caerán 8 gotas de un tamaño que será la suma de 0 más un número aleatorio entre 0 y 3. El segundo tipo de gota [3,8,1] indica que caerán 1 gota de un tamaño de 3 más un número aleatorio entre el 3 y el 8. Finalmente el 50 indica en milisegundos cada cuando caerán esas gotas.

  • image.src: es la ruta de la imagen de fondo.

El resultado es una escena de lluvia realmente interesante y muy personalizable, no te pierdas nuestra demo.

Ver demo Descargar ejemplo

Jugando con Rainyday.js

Es inevitable, seguro que a ti te pasa lo mismo, al principio se trataba de simular una lluvia lo más real posible, pero ¿qué pasa si jugamos con algunos de los parámetros?.

El resultado puede ser de lo más jocoso y extraño como la lluvia con una gravedad distorsionada.
Ver demo

 

O una lluvia que podría considerarse una aberración de la naturaleza.
Ver demo

Compartir en redes sociales

Si este artículo te ha sido de ayuda o te parece interesante, ayúdanos a difundirlo.

Compartir en Facebook Compartir en Twitter Compartir en Google+ Compartir en Linkedin
  • César

    Muy interesante el efecto lluvia, pero al probarlo me tope con un problemita; cuando lo abro con el Mozilla Firefox todo bien, sin problemas. Pero cuando lo abro con el chrome no me jala la imagen y no hace nada. ¿Qué podría estar pasando?

    • blogendeos

      Hola César, gracias por visitarnos.
      A simple vista es difícil darte un motivo por el que no aparece la imagen.
      ¿Te funciona correctamente la imagen en la demo? ¿Aparece algún error en la consola de JavaScript?

      Saludos

      • César

        Primero intenté hacerlo yo mismo con la explicación que dan, y al probarlo noté que la imagen no aparecía. Después opté por descargar el Demo y querer visualizarlo (no le modifique nada al código) pasaba lo mismo, no me mostraba la imagen (uso Gogle Chrome), entonces intenté abrirlo con Mozilla y o sorpresa ahí si me funcionaba. Extra: El Demo que pusieron online si me funciona perfecto en el Chrome, el problema viene cuando lo decargo, ahí si ya no me jala, en local.

        • blogendeos

          Hola César!

          Este fallo se da cuando ejecutas el fichero index.html fuera de un servidor web. Como mencionas, Firefox no da problemas, pero Chrome muestra un error en la consola “Image from origin ‘file://’ has been blocked from loading by Cross-Origin Resource Sharing policy: Received an invalid response. Origin ‘null’ is therefore not allowed access.”

          Te proponemos dos soluciones para Chrome:

          1- Pruébalo en un Wampserver o servidor online y problema resuelto.

          2- Si tienes que hacerlo en local y en Chrome sí o sí, entonces ejecuta Chrome sin las directivas de seguridad (solo para desarrollo), para ello sigue los siguientes pasos:

          – 2.1 – Cierra todas las pestañas y procesos de Chrome

          – 2.2 – Crea un acceso directo con la ruta “C:Program FilesGoogleChromeApplicationchrome.exe” –args –disable-web-security

          – 2.3 – Haz doble clic en este acceso directo que has creado y debería aparecerte Chrome como la imagen adjunta

          – 2.4 – Abre index.html de la demo y funcionará como en la segunda imagen adjunta

  • NikoWeb

    Hola muy bueno e código.
    Me pregunto como hago para escribir sobre este código.
    Gracias.

    • blogendeos

      Buenos días NikoWeb,

      Gracias a ti por tu mensaje. Para superponer elementos encima del efecto puedes jugar con las propiedades CSS “position” y “z-index”. Si te fijas, el menú superior que hay en la demo está superpuesto sobre el efecto de lluvia.

      Saludos

  • Alicia Martin

    Buenas, llevo media tarde dándole vueltas y no soy capaz de implementarlo, puedes echarme una mano? Creo que hay algo que se me escapa… a ver,

    – La carpeta de rainyday dónde la copio?
    – Cuando dices “En nuestro html hay que llamar el fichero JavaScript”… nuestro fichero html es el que va a abrir la página? – Y luego:

    eso dónde lo coloco? en el mismo html? Agradecería que me pudieras echar una mano, porque ya te digo, llevo media tarde y no me sale.. u-_-

    gracias 🙂

    • blogendeos

      Hola @disqus_tybGOSo9ym:disqus

      Tendrás la respuesta a todas estas preguntas si descargas los ficheros de ejemplo. Es el botón “descargar ejemplo” que hay al lado del “Ver demo”.

      Aún así:
      – El fichero rainyday.js lo puedes colocar en la carpeta de ficheros javascript, por ejemplo en una carpeta llamada “js”
      – El “llamar el fichero JavaScript” se refiere a hacer el enlace hacia el fichero rainyday.js que comentaba en la linea anterior.
      – El “body onload.. ” se coloca en el index.html, que es el que abrirá la página.

      Ya te digo, descargando los ficheros de ejemplo lo verás todo.

      ¡Saludos!

      • Alicia Martin

        Ante todo muchas gracias por responder tan tan rápido! 😀

        Pues si, ya he conseguido que funcione! ^_^ Lo único es que en la parte de abajo se ve la imagen sin desenfoque (como si estuviera la misma imagen y asoma debajo de la desenfocada), sabes qué puede ser?

        Saludos y muchas gracias!

        • blogendeos

          ¡Primer obstáculo superado, genial!

          A por el segundo: el tema de la imagen que mencionas es complicado determinar qué puede estar fallando sin que podamos verlo…
          Algunas cosas que podrías hacer es: limpiar caché del navegador, comprobar si pasa lo mismo en otro navegador, revisar que el código sea correcto, por ejemplo que no te hayas olvidado ningúna comilla, probar otra imagen…

          A ver si hay suerte.
          ¡Saludos!

          • Alicia Martin

            Wooola! Pues creo que es por la barra negra de arriba, como si hubiera dos imágenes (la enfocada y la desenfocada) y la barra superior desplaza la imagen no desenfocada (apareciendo esta por debajo de la otra), si me indicas un email al que te pueda escribir te paso el link 😉

            gracias ^_^

          • blogendeos

            Hola @disqus_tybGOSo9ym:disqus
            Disculpa la tardanza en contestar, es que los comentarios con enlaces no se publican automáticamente y no lo habíamos visto.

            Te adjunto una captura de pantalla de cómo lo vemos nosotros Parece que ya se ha arreglado ¿verdad?

            ¡Se ve genial!

          • Alicia Martin

            wooola! he intentado responderte pero se me borra el mensaje cada vez que lo escribo (creo que puede ser porque he copiado el enlace de la web para que vieras lo que ocurre).

            Te comentaba que he probado lo que me comentabas y eso, pero sigue saliendo, si me indicas dónde puedo mandarte el enlace para que lo veas una imagen vale más que mil palabras 😉

            saludos y gracias! ^_^

  • Milton Ortega

    Muy bueno, lo implementaré en mi web, muchas gracias y un saludo.

    • blogendeos

      Hola @disqus_EEwImW4VMT:disqus nos alegra que digas eso,
      ¡Muchos saludos!

  • Alejandro

    como puedo poner este efecto en el fondo del body. solo funciona en img.src

    • blogendeos

      Hola Alejandro,
      Este efecto no se puede crear en el fondo del body, necesita de una imagen para funcionar.
      Mirando la documentación no parece por ningún sitio que dé la opción que buscas…

      ¡Gracias por leernos!

  • Layton

    Buenas, muchas gracias esta excelente.
    Amigo para utilizarlo es necesario descargar el archivo o puede ser (CDN)

    • blogendeos

      Buenos días Layton. Gracias por su mensaje.
      Para usar este plugin deberá descargar los ficheros.

      Saludos.

Al usar este sitio acepta el uso de cookies para análisis y contenido personalizado. Leer más

ACEPTAR
Aviso de cookies