Interactive Water Ripple Effect On Background - jqueryRipple

Just another jQuery plugin that adds interactive, customizable water ripple effect to any container element using JavaScript and CSS. 

By default, the water ripple effect is triggered by mouse click. You can customize the plugin to use any trigger events such as mouse move, mouse down, etc.

See also:

• Realistic Water Ripple Animation Using WebGL

How to use it:

1. To get started, first you need to load both JQuery library and the jqueryRipple plugin in the page.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="jqueryRipple.js"></script>

2. Then call the function on the target container element. That's it.

<div class="wave-box"></div>

$(document).ready(function(){
  $(".wave-box").ripple();
});

3. Specify the max width/height of the water ripple effect.

$(document).ready(function(){
  $(".wave-box").ripple({
    width   : 500,
    height  : 500
  });
});

4. Set the duration of the animation.

$(document).ready(function(){
  $(".wave-box").ripple({
    duration: 2000
  });
});

5. Override the default color of the water ripple effect.

$(document).ready(function(){
  $(".wave-box").ripple({
    color: "rgba(203, 237, 137, 0.5)",
  });
});

6. Customize the trigger event.

$(document).ready(function(){
  $(".wave-box").ripple({
    event:"mousemove"
  });
});

---

This awesome jQuery plugin is developed by marufhasan1. For more Advanced Usages, please check the demo page or visit the official website.