Ripple effect JavaScript

April 25, 2023

Ripple effect JavaScript

In this article, we’ll explain about the javaScript and the javascript ripple effect. After that, we’ll learn the different practical examples of javascript ripple effects with the help of JavaScript.

What do you mean by JavaScript?

JavaScript is a client-side and high-level, interpreted programming and javascript scripting language used to make web pages more interactive. It enables you to implement complex and beautiful designs on web application pages.

What do you mean by ripple effect JavaScript?

In JavaScript, the javascript ripple effect provides an immediate visual confirmation at the point of contact when the consumers interact with UI attributes/elements. The interaction is commonly an action that you want your visitors to take.

Example

<! DOCTYPE html>  
<html lang = "en">  
<head>  
  <meta charset = "UTF-8">  
  <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">  
  <meta http-equiv="X-UA-Compatible" content = "ie=edge">  
  <title> Water ripple effect using JavaScript </title>  
</head>  
<style>  
body  
{  
  padding: 0;  
  margin: 0;  
   color: #404E67;  
    background: #F5F7FA;  
    font-family: 'Open Sans', sans-serif;  
}  
.full-landing-image  
{  
  width: 100%;  
  height: 100vh;  
  background:   
    linear-gradient(  
      rgba(0, 0, 0, 0.6),  
      rgba(0, 0, 0, 0.6)  
    ),url("1.png") no-repeat center;  
  position: relative;  
  float: left;  
}  
.mid h2 {  
  font-family: 'Roboto', sans-serif;  
  font-weight: 800;  
  color: white;  
  text-transform: uppercase;  
  margin: 0;  
  position: absolute;  
  top: 60%;  
  left: 60%;  
  font-size: 2rem;  
  transform: translate(-50%, -50%);  
}  
.mid h1 {  
  font-family: 'Roboto', sans-serif;  
  font-weight: 900;  
  color: white;  
  text-transform: uppercase;  
  margin: 0;  
  position: absolute;  
  top: 40%;  
  left: 60%;  
  font-size: 2rem;  
  transform: translate(-50%, -50%);  
}  
.glow {  
  font-size: 80px;  
  color: #fff;  
  text-align: center;  
  animation: glow 1s ease-in-out infinite alternate;  
}  

  
@-webkit-keyframes glow {  
 from {  
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;  
  }  
  to {  
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;  
  }  
}  
</style>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js"> </script>  
  <script>  
  $(document).ready (function () {  
  $(".full-landing-image").ripples ({  
  resolution: 500,  
  perturbance: 0.04,  
});  
});  
  </script>  
<body>  
  <div class="full-landing-image mid">  
  <h1 class="glow"> Example <br> </h1>  
<h2 class="glow"> water ripple effect using JavaScript </h2>  
</div>  
</body>  
</html>

In the above example, we have created a javascript water ripple effect with the help of JavaScript. When we hover on the image, the water ripple effect is shown.