In this article we will learn about making water Ripple effects using jQuery, Ripples.js is a well-designed and compact jQuery plugin for producing stunning ripple effects. here we will use jQuery ripple.js.
Installation: Before moving further, firstly we have to add the water ripple CDN file to our project file:
https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js
Approach:
- First, add the above CDN to your working file.
- The drop radius defines the size (in pixels) of the drop that results by clicking or moving the mouse over the canvas.
- Perdurance is the amount of refraction caused by a ripple. 0 means there is no refraction.
- The resolution, The width, and the height of the WebGL texture to render to. The larger this value, the smoother the rendering and the slower the ripples will propagate.
- Interactive, mouse clicks and mouse movements both events can trigger the effect.
Example: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html><html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="full-landing-image">
<h1>GeeksForGeeks</h1>
</div>
</body>
</html>
|
CSS Code:
CSS
body{ margin: 0;
padding: 0;
}h1{
text-align: center;
color: blueviolet;
padding-top: 300px;
}.full-landing-image{ width: 100%;
height: 100vh;
background-color: black;
background-size: cover;
} |
JavaScript Code:
Javascript
<!DOCTYPE html><html lang="en" dir="ltr">
<head> <meta charset="utf-8">
<script src=
</script>
<script src=
</script>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
h1 {
text-align: center;
color: blueviolet;
padding-top: 300px;
}
.full-landing-image {
width: 100%;
height: 100vh;
background-color: black;
background-size: cover;
}
</style>
</head><body> <div class="full-landing-image">
<h1>GeeksForGeeks</h1>
</div>
<script type="text/javascript">
$(".full-landing-image").ripples({
resolution: 512,
dropRadius: 20,
interactive: true,
perturbance: 0.02,
});
</script>
</body></html> |
Output: