jQuery Water Ripple Effect on Click & Hover

[intro_ad]

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: January 20, 2024
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 259 KB
Dependencies: jQuery 3.0 or Latest version
Last Modified:
MIT
10,423
[ad_after_overview]

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,
    });
});
[ad_after_artical]
About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X