jQuery Ripples Effect Not Displaying

Question

Using the Jquery Ripple effect library, i'm trying to apply the given effect as a CSS class element. I'm using a WordPress development environment, and I have added my function run (functions.php) but my effect does not display when I create the element such as:

<div class="ripples-effect">
<!-- Your content here -->

I have checked console and there are no errors such as jquery errors.

function enqueue_custom_scripts() {
    wp_enqueue_script('jquery');

    // Enqueue jQuery Ripples JS
    wp_enqueue_script('jquery-ripples', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js', array('jquery'), '0.5.3', true);
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $(".ripples-effect").ripples({
                resolution: 512,
    dropRadius: 20,
  perturbance: 5,
            });
        });
    </script>
    <?php
}

add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

Answer 1

This is working fine in the below example. If you move a cursor over the div you can see the ripple effect and add a background image to your div.

jQuery('.ripples-effect').ripples({
  resolution: 512,
  dropRadius: 20, //px
  perturbance: 0.04,
});

.ripples-effect {
   background: url(https://ik.imagekit.io/demo/medium_cafe_B1iTdD0C.jpg);
   background-size: cover;
   background-position: 50% 0;
   height: 100vh;
   color: #fff;
   text-align: center;
   padding: 100px; 
}

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

<div class="ripples-effect">
   Your content here
</div>