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');