Creé este sitio en webflow: https://flumes-fantastic-site.webflow.io/ con la ayuda de la biblioteca jquery ripples y estoy tratando de hacer que las caídas automáticas comiencen cuando cargo la página, a partir de ahora, tengo que ir a otra pestaña y volver a ella para que pueda comenzar a reproducirse.
Soy nuevo en la codificación, así que probablemente me esté equivocando con el código. Esto es lo que un amigo de stackoverflow (Daniels118) me ayudó a reconstruir:
<script src="https://cdn.jsdelivr.net/npm/jquery.ripples@0.6.3/dist/jquery.ripples.min.js"></script> <script> $('#ripple').ripples({ resolution: 512, dropRadius: 30, perturbance: 0.04, }); function randomDrop() { var $el = $('#ripple'); var x = Math.random() * $el.outerWidth(); var y = Math.random() * $el.outerHeight(); var dropRadius = 30; var strength = 0.04 + Math.random() * 0.04; $el.ripples('drop', x, y, dropRadius, strength); } $(function() { $("#ripple").focus(); }); $(function() { $('#ripple').ripples({ resolution: 512, dropRadius: 30, perturbance: 0.04 }); var timer = null; $(window).focus(function() { if (timer === null) { //console.log('on'); timer = setInterval(randomDrop, 1000); } }) .blur(function() { if (timer !== null) { clearInterval(timer); timer = null; //console.log('off'); } }) .focus(); }); </script>Agradezco cualquier comentario. ¡Gracias!
Ha establecido el intervalo que hace que las caídas aleatorias solo comiencen cuando se activa el evento window.focus() . En su lugar, simplemente cree este intervalo directamente dentro de document.ready .
Además, puede mejorar el efecto de la gota de lluvia mediante el uso de un setTimeout() recursivo, con un retraso aleatorio entre instancias, en lugar de un setInterval() fijo. Finalmente, que tienes un código repetido que se puede eliminar.
Dicho esto, prueba esto:
let randomDrop = $el => { var x = Math.random() * $el.outerWidth(); var y = Math.random() * $el.outerHeight(); var dropRadius = 30; var strength = 0.04 + Math.random() * 0.04; $el.ripples('drop', x, y, dropRadius, strength); } let setRandomInterval = (callback, minInterval, maxInterval) => { setTimeout(() => { callback(); setRandomInterval(callback, minInterval, maxInterval); }, Math.floor(Math.random() * (maxInterval - minInterval + 1) + minInterval)); } $(function() { let $el = $('#ripple').ripples({ resolution: 512, dropRadius: 30, perturbance: 0.04 }); setRandomInterval(() => randomDrop($el), 500, 3000); }); #ripple { height: 500px; width: 500px; background: url('https://i.imgur.com/KHIuHuH.jpeg'); background-size: cover; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery.ripples@0.6.3/dist/jquery.ripples.min.js"></script> <div id="ripple" class="jquery-ripples"></div>