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
- Awesome water ripple animation CSS
- How to create a water ripple animation effect
- 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
Downloading jQuery
There are two versions of jQuery available for downloading:
- Production version – minified and compressed version
- 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
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;
}
Top comments (0)