jQuery Water Ripple Effect on Click & Hover

The Ripples.js is a lightweight and well-developed jQuery plugin to create cool ripple effects. This project is based on jQuery ripples.js plugin to create a water ripple effect on click & hover event. The plugin produces realistic water wave animation when the user hovers on the HTML element.

You can apply this water wave effect on any HTML element, like buttons, navigations or background images, etc.

Plugin Overview and Preview

Plugin: waterRipples1
Author: Dallin Edmunds
Category: Others
Published: 9 months ago
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 259 KB
Dependencies: jQuery 3.0 or Latest version
Last Modified:
MIT
1,717

How to Create a jQuery Water Ripple Effect

1. First of all, load the jQuery JavaScript library into your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

2. Now, load the ripples.js by adding the following CDN link in the head tag of your HTML page.

<!-- jQuery Ripples JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js"></script>

3. After that, create an HTML element on which the ripple effect will be applied. Usually, you can use a ripple effect on buttons, background images, and other elements. However, the following div element contains a background image with the ripples effect.

<div class="full-landing-image"></div>

4. Define some CSS styles for div and add a background image.

.full-landing-image{
    width: 100%;
    height: 100vh;
    background: url(path/to/image.jpg) no-repeat center;
    background-size: cover;
}

5. Finally, call the plugin in jQuery document ready function to integrated with Ripples JS.

$(document).ready(function(){
	    $(".full-landing-image").ripples({
        resolution: 200,
        perturbance: .004,
    });
});