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: | File not found! |
| Dependencies: | jQuery 3.0 or Latest version |
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,
});
});
Similar Code Snippets:
JavaScript Timesheet Calculator
JavaScript Signature Pad Code with Example
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.