Ripple effect JavaScript

In this article, we will explain about the javaScript and the ripple effect. After that, we will learn the various practical examples of ripple effects with the help of JavaScript.

What do you mean by JavaScript?

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

What do you mean by ripple effect JavaScript?

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

Various examples of the ripple effect with the help of JavaScript.

Example 1:

  <! 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>  

Explanation:

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

Following is the output of this example:

Ripple effect JavaScript

Example 2:

  <! DOCTYPE html>  <html>  <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>    <link href=”https://fonts.googleapis.com/css?family=Open+Sans” rel = “stylesheet”>  </head>  <style>  @import url(‘https://fonts.googleapis.com/css?family=Montserrat:700’);  html {    box-sizing: border-box;  }  * {    box-sizing: inherit;  }  *:before {    box-sizing: inherit;  }  *:after {    box-sizing: inherit;  }  body {    position: fixed;    width: 100%;    height: 100%;    display: flex;    flex-direction: row;    justify-content: center;    align-items: center;    background: pink;    font-family: ‘Open Sans’, sans-serif;  }  h1 {    font-family: ‘Roboto’, sans-serif;    font-weight: 900;    color: white;    text-transform: uppercase;    font-size: 2rem;  }  h2 {    font-family: ‘Roboto’, sans-serif;    font-weight: 800;    color: white;    text-transform: uppercase;    font-size: 2rem;  }  button {    position: relative;    display: block;    margin: 0 auto;    background: black;    color: red;    text-align: center;    font-size: 26px;    font-family: “Montserrat”;    font-weight: 700;    padding: 20px 45px;    letter-spacing: .25em;    text-transform: uppercase;    border: 0;    overflow: hidden;    border: 5px white solid;    cursor: pointer;    font-family: ‘Open Sans’, sans-serif;    &:active,    &:visited,    &:focus {      outline: 0;      border: 0;    }  }  /*  Ripple */  span {    width: 0;    height: 0;    border-radius: 50%;    background: rgba(255, 255, 255, 0.5);    transform: scale(0);    position: absolute;    opacity: 1;  }  .rippleAnimation {      animation: ripple .6s linear;  }  @keyframes ripple {    100% {      transform: scale(2);      opacity: 0;    }  }  </style>  <script src=”http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js”> </script>  <script>  $(document).ready (function () {  let btn = document.querySelector(‘button’);  function ripple(e) {  // Setup    let posX = this.offsetLeft;    let posY = this.offsetTop;    let buttonWidth = this.offsetWidth;    let buttonHeight =  this.offsetHeight;     // Add the element    let ripple = document.createElement(‘span’);    this.appendChild(ripple);  // Make it round!    if(buttonWidth >= buttonHeight) {      buttonHeight = buttonWidth;    } else {      buttonWidth = buttonHeight;     }    // Get the center of the element    var x = e.pageX – posX – buttonWidth / 2;    var y = e.pageY – posY – buttonHeight / 2;    ripple.style.width = `${buttonWidth}px`;    ripple.style.height = `${buttonHeight}px`;    ripple.style.top = `${y}px`;    ripple.style.left = `${x}px`;        ripple.classList.add(‘rippleAnimation’);    setTimeout(() => {      this.removeChild(ripple);    }, 1000);  }  btn.addEventListener(‘click’, ripple);  });  </script>  <body>  <button> <h1> Example </h1> <br> <br>  <h2> Water ripple Effect animation on hover </h2> </button>   </body>  </html>  

Explanation:

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

Following is the output of this example:

Ripple effect JavaScript

Example 3:

  <! 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 </title>  </head>  <style>  html {    height: 100%;  }  h1 {    font-family: ‘Roboto’, sans-serif;    font-weight: 900;    color: white;    text-transform: uppercase;    margin: 0;    top: 60%;    left: 60%;    font-size: 2rem;    transform: translate(-50%, -50%);  }  h2 {    font-family: ‘Roboto’, sans-serif;    font-weight: 700;    color: white;    text-transform: uppercase;    margin: 0;    top: 60%;    left: 60%;    font-size: 1rem;    transform: translate(-50%, -50%);  }  body {    color: #fff;    font-size: 16px;    font-family: “Helvetica Neue”,Helvetica,Arial,sans-serif;    background-image: url(“3.jpg”);    background-size: cover;    background-position: 50% 0;    height: 100%;    text-align: center;    margin: 0;    padding: 0;  }  body:before {    content: ”;    display: inline-block;    vertical-align: middle;    height: 100%;  }  section {    display: inline-block;    vertical-align: middle;    padding:  100px;    max-width: 500px;    text-shadow: 0 1px 2px rgba(0,0,0,0.5);    box-shadow: 0 5px 15px rgba(0,0,0,0.5);  }  /* ignore the code below */  .link-area  {    position: fixed;    bottom: 20px;    left: 20px;      padding: 15px;    border-radius: 40px;    background: tomato;  }  .link-area a  {    text-decoration: none;    color: #fff;    font-size: 25px;  }  .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=”http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js”> </script>  <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.js”> </script>  <script>  $(document).ready (function () {  $(‘body’).ripples ({    resolution: 512,    dropRadius: 20,    perturbance: 0.04,  });  });  </script>  <body>    <section>    <header>      <h1 class =?glow? > Example <br> </h1> <h2> Water Ripple Effect using JavaScript </h2>    </header>  </section>  </body>  </html>  

Explanation:

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

Following is the output of this example:

Ripple effect JavaScript

Next TopicCheck if the value exists in Array in Javascript

Ripple effect JavaScript

Ripple effect JavaScript

What do you mean by JavaScript?

What do you mean by ripple effect JavaScript?

Various examples of the ripple effect with the help of JavaScript.

Example 1:

Example 2:

Example 3:

Method in Java

Delete Multiple Records using Checkbox in Laravel

You may also like