Ripple effect JavaScript

0 0 3 minutes read

In JavaScript, the ripple effect method provides an instant change or visual effect to be noticed by users when the user interacts with elements of the UI. This change in visual effect or any kind of interactivity with UI will be done for the users.

The Ripple effect is most useful when we are building a UI and want there is some interaction with users. With the help of the ripple effect, we can provide it.

features of the ripple effect :

Interaction with UI
Visual changes on actions
powerful and attractive UI for users

Let’s see some of the examples to understand it better:

Example 1: Ripple Effect with hover on buttons.

index.html: Create a container div and the button layout.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <title>Ripple Effect</title> 
    <link rel="stylesheet" href="./index.css"> 
    <script src="./index.js"></script> 
</head> 
  
<body> 
    <div class="display"> 
        <a class="HOVER"> 
            <span></span> 
            <text>Hover Me!</text> 
        </a> 
    </div> 
</body> 
  
</html>

index.css: Add some CSS for design and visual effects

CSS

/* Write CSS Here */
@keyframes shake { 
    25% { 
        transform:  
          rotate(calc(var(--angle) * -1)); 
    } 
  
    50% { 
        transform: rotate(var(--angle)); 
    } 
  
    100% { 
        transform: rotate(0deg); 
    } 
} 
  
body { 
    font: 100 1.3em sans-serif; 
    display: flex; 
    flex-direction: column; 
    align-content: center; 
    padding: 0 5rem; 
} 
  
h1 { 
    font-weight: 100; 
} 
  
.display { 
    display: grid; 
    grid-template-columns: 50% 50%; 
    gap: 0.1em; 
} 
  
.HOVER { 
    --width: 100%; 
    --time: 0.7s; 
  
    position: relative; 
    display: inline-block; 
    height: 1em; 
    padding: 1em; 
  
    color: white; 
    background: #222; 
    overflow: hidden; 
} 
  
.HOVER text { 
    position: relative; 
    z-index: 5; 
  
    transition: color var(--time); 
} 
  
.HOVER:hover text { 
    color: #222; 
} 
  
.HOVER span { 
    position: absolute; 
    display: block; 
    content: ""; 
    z-index: 0; 
    width: 0; 
    height: 0; 
  
    border-radius: 100%; 
    background: #fff; 
  
    transform: translate(-50%, -50%); 
    transition: width var(--time),  
                  padding-top var(--time); 
} 
  
.HOVER:hover span { 
    width: calc(var(--width) * 2.25); 
    padding-top: calc(var(--width) * 2.25); 
} 

index.js: This JavaScript file is calling the animation when the mouse hovers the button layout area. It is calling the event and adding the animation class of CSS when the mouse hover and removes it when it’s outside the layout.

Javascript

const ANIMATEDCLASSNAME = "animated"; 
const ELEMENTS = document.querySelectorAll(".HOVER"); 
const ELEMENTS_SPAN = []; 
  
ELEMENTS.forEach((element, index) => { 
    let addAnimation = false; 
  
  
    if (!ELEMENTS_SPAN[index]) 
        ELEMENTS_SPAN[index] = 
            element.querySelector("span"); 
  
    element.addEventListener("mouseover", e => { 
        ELEMENTS_SPAN[index].style.left = 
            e.pageX - element.offsetLeft + "px"; 
        ELEMENTS_SPAN[index].style.top = 
            e.pageY - element.offsetTop + "px"; 
  
        // Add an animation-class to animate via CSS. 
        if (addAnimation)  
            element.classList.add(ANIMATEDCLASSNAME); 
    }); 
  
    element.addEventListener("mouseout", e => { 
        ELEMENTS_SPAN[index].style.left = 
            e.pageX - element.offsetLeft + "px"; 
        ELEMENTS_SPAN[index].style.top = 
            e.pageY - element.offsetTop + "px"; 
    }); 
}); 

Output: When we open the index.html file in the browser or open it with the live Server, the output is below.

Output

Example 2: Ripple Effect for Material UI like button.

index.html: Create a container div and the button inside it

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <title>Ripple Effect</title> 
    <link rel="stylesheet" href="./index.css"> 
    <script src="./index.js"></script> 
</head> 
  
<body> 
    <div class="display"> 
        <button class="ripple">Button</button> 
    </div> 
</body> 
  
</html>

index.css: Added styling for the container and the ripple effect.

CSS

/* Write CSS Here */
  
body { 
    font: 100 1.3em sans-serif; 
    display: flex; 
    flex-direction: column; 
    align-content: center; 
    padding: 0 5rem; 
    min-height: 100vh; 
} 
  
.display { 
    display: flex; 
    flex-direction: column; 
    align-content: center; 
    justify-content: center; 
    margin: 0 auto; 
    height: 100vh; 
    max-width: 500px; 
} 
.ripple { 
    background-position: center; 
    transition: background 0.8s; 
} 
.ripple:hover { 
    background: #47a7f5 radial-gradient(circle,  
          transparent 1%, #47a7f5 1%) 
        center/15000%; 
} 
.ripple:active { 
    background-color: #6eb9f7; 
    background-size: 100%; 
    transition: background 0s; 
} 
  
/* Button style */
button { 
    border: none; 
    border-radius: 2px; 
    padding: 12px 18px; 
    font-size: 16px; 
    text-transform: uppercase; 
    cursor: pointer; 
    color: white; 
    background-color: #2196f3; 
    box-shadow: 0 0 4px #999; 
    outline: none; 
} 

index.js: In this example, there is no need of adding JavaScript, so we are going to skip that.

Output: When we open the index.html file in the browser or open it with the live Server, the output is below.

Here we can observe a material design type ripple effect on interaction with the UI.

This is the ripple effect and it’s mostly useful in creating interactivity of UI with users or providing any specific actions.

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!