How to create a water ripple effect – Awesome water ripple effect

How to create a water ripple effect – Awesome water ripple effect

water ripple effect plugin

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

Click Here to get jQuery CDN

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

Click Here to download plugin

How to use it:

  • 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">
  • 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;
}
 <script>
    $(document).ready(function () {
      $('#ripple-bg').ripples('show');
    });
  </script>

Water ripple animation source code

#Final Result

Watch Now

Did you find this article valuable?

Support Rahul Jangid by becoming a sponsor. Any amount is appreciated!