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.
<!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
/* 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.
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
<!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.
/* 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.