jQuery - Start animation automatically when page loads

user_19735956 0
Viewed 40

I've created this site on webflow: https://flumes-fantastic-site.webflow.io/ with the help of the jquery ripples library and I'm trying to make the automatic drops start when I load the page, as of now, I have to go to another tab and come back to it so it can start playing.

I'm new to coding so I'm probably messing up here with the code. This is what a friend from the stackoverflow (Daniels118) helped me piece together:

<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>

I appreciate any feedback. Thank you!

jquery javascript
1 Answers

You've set the interval which causes the random drops to only start when the window.focus() event fires. Instead, just create this interval directly within document.ready.

In addition, you can improve the raindrop effect by using a recursive setTimeout(), with a random delay between instances, instead of a fixed setInterval(). Finally, that you've got some repeated code which can be removed.

With that said, try this:

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>

user_5194130
Related