This tutorial will delve into JavaScript and the concept of the ripple effect. Subsequently, we'll explore multiple real-world instances demonstrating the ripple effect using JavaScript.
What do you mean by JavaScript?
JavaScript is a scripting language that is high-level and interpreted, primarily used on the client-side to enhance the interactivity of web pages. It empowers developers to create intricate and visually appealing designs within web pages.
What do you mean by ripple effect JavaScript?
Within JavaScript, the ripple effect serves to offer users a swift visual acknowledgment precisely where they engage with user interface components. This engagement typically signifies an action that is desired for visitors to perform.
Various examples of the ripple effect with the help of JavaScript.
Example 1:
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://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"> </script>
<script src="https://placehold.co/800x600/1abc9c/ffffff?text=Sample+Image"> </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 provided instance, we have implemented a water ripple animation using JavaScript. Upon hovering over the image, the water ripple effect becomes visible.
Following is the output of this example:
Example 2:
Example
<! 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="https://placehold.co/400x300/3498db/ffffff?text=Sample+Image"> </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 demonstration above, a water ripple animation has been implemented on the button using JavaScript. The ripple effect becomes visible when the button is hovered over.
Following is the output of this example:
Example 3:
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 </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="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"> </script>
<script src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"> </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 demonstration above, a water ripple animation was generated using JavaScript. The ripple effect becomes visible when hovering over the image.
Following is the output of this example: