Cerrar video

Cómo aplicar un efecto de onda de agua a cualquier fondo o background en divi

por | Dic 18, 2019 | Tutorial gratuito | 7 Comentarios

Las imágenes de fondo son a menudo aburridas. ¡Utiliza este efecto para hacer que tus imágenes de fondo sean más interactivas!

En este tutorial te enseñaré a aplicar un efecto de onda de agua a un fondo o background de cualquier sección, fila o módulo de divi.

Este efecto lo lograremos gracias a una librería llamada jQuery Ripples.

El código que vamos a utilizar para enlazar la librería jQuery Ripples con divi es el siguiente:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js"></script>

Posteriormente para inicializar el efecto necesitamos este otro fragmento de código jQuery:

<script>
jQuery(document).ready(function( $ ) {
 $('.fondo-efecto-ondas').ripples({
	 resolution: 512,
	 dropRadius: 20,
	 perturbance: 0.01,
 });
});
</script>

Genial, con estos simples fragmentos de código ya tendremos el efecto realizado.

Tutoriales Relacionados

7 Comentarios

  1. Javier López

    Genial Oscar.. Gracias por el tuto. De casualidad no sabrás como hacer que este mismo efecto se realice de manera automática? es decir que al entrar en la web ya se empiece a reproducir ese efecto de onda de agua.

    Responder
    • Oscar Viedma

      Hola Javier el efecto solamente es sensible al movimiento del cursor.

      Podrías considerar colocar un video de fondo como alternativa si quieres que se reproduzca al entrar a la web.

      ¡Saludos.

      Responder
  2. Urvish from dealzwale

    Hey oscar ,

    I diid the same way you told in video ,still it’s not working. Is there any update or setting i have to do first?

    Responder
    • Oscar Viedma

      Si tienes la versión reciente de divi (4.10.x) dirigete a Divi > Opciones del tema > General > Performance y deshabilita la opción: Defer jQuery And jQuery Migrate.

      Espero esto ayude.

      Saludos.

      Responder
  3. Aitor

    Buenas tardes!

    Lo primero agradeceros el efecto y este contenido tan top.

    Lo he probado y no funciona…

    Responder
    • Oscar Viedma

      Hola Aitor, muchas gracias.

      El efecto debe funcionar correctamente, solamente asegúrate que tengas deshabilita la opción «Defer jQuery And jQuery Migrate» de Divi > Opciones del tema > Performance…

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada.

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$6 USD / mes

Pin It on Pinterest