How to create a water ripple effect

Hello, guys In this tutorial we will try to solve the mentioned query. and also we will learn how to create a water ripple effect

Common Query

1. Awesome water ripple animation CSS
2. How to create a water ripple animation effect
3. How to create a water ripple animation

See Also:- How to create a dot loading animation

Awesome water ripple effect step by step guide

1: Add jQuery CDN or locally

Click Here to get jQuery CDN

Downloading jQuery

There are two versions of jQuery available for downloading:

1. Production version – minified and compressed version
2. Development version – this is for testing and development version (uncompressed and readable code)

Both versions can be downloaded from jQuery.com

2: Add jQuery plugin for effect

How to get water ripple effect plugin

First of all, we have to download the plugin for the water ripple effect from the internet

Click Here to download plugin

How to use it:

1:- Include the jQuery library and jQuery ripples plugin in the Html document.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jquery.ripples.js">

2:- Create an Html element with a background image.

<div id="ripple-bg"></div>

div#ripple-bg {
  width: 100%;
  height: 100%;
  background: url(https://i.postimg.cc/433wmMJP/water-bg.jpg)no-repeat center / cover;
}

Check full tutorial with source code