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.
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.
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.
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?
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.
It’s working now. Thank you so much Oscar .You are the champ 👌
Buenas tardes!
Lo primero agradeceros el efecto y este contenido tan top.
Lo he probado y no funciona…
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…