DEV Community

Cover image for How to create a water ripple effect
Stackfindover
Stackfindover

Posted on • Updated on

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

Alt Text

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)

Alt Text

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

Alt Text

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">
Enter fullscreen mode Exit fullscreen mode

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

<div id="ripple-bg"></div>
Enter fullscreen mode Exit fullscreen mode
div#ripple-bg {
  width: 100%;
  height: 100%;
  background: url(https://i.postimg.cc/433wmMJP/water-bg.jpg)no-repeat center / cover;
}
Enter fullscreen mode Exit fullscreen mode

Check full tutorial with source code

Top comments (0)