Table of Contents
In today’s digital landscape, user engagement is more important than ever. One way to enhance the user experience on your website is through captivating visual effects. One such effect is the Cursor In & Out Ripple Effects, which adds a dynamic and interactive touch to your web elements. In this blog post, we’ll guide you through the process of implementing this eye-catching effect using simple HTML, CSS, and JavaScript.
What Are Cursor In & Out Ripple Effects?
Cursor In & Out Ripple Effects are animations that create a ripple-like visual when a user hovers over an element. This effect not only makes the interface more engaging but also provides visual feedback, helping users understand that they can interact with the elements. Let’s dive into how to create this effect step by step.
Step-by-Step Implementation
HTML Structure
First, we need a basic HTML structure. Here’s a simple layout containing two interactive boxes.
<html>
<head>
<title>Cursor In Out Ripple Effects | TechyTechs</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<script>
let box = document.querySelectorAll('.box');
box.forEach(box => {
box.onmousemove = function(e) {
let x = e.pageX - box.offsetLeft;
let y = e.pageY - box.offsetTop;
box.style.setProperty('--x', x+'px');
box.style.setProperty('--y', y+'px');
}
})
</script>
</div>
</body>
</html>
CSS Styles
Next, we’ll style our boxes and define the ripple effect. The following CSS will create the necessary styles for the boxes and the ripple animation.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #131313;
}
.container {
display: flex;
gap: 50px;
}
.container .box {
position: relative;
width: 300px;
height: 420px;
background: #232323;
border-radius: 20px;
overflow: hidden;
}
.container .box::before {
content: '';
position: absolute;
top: var(--y);
left: var(--x);
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-radius: 50%;
background: #9bdc28;
transition: 0.5s, top 0s, left 0s;
}
.container .box:hover::before {
width: 1100px;
height: 1100px;
}
How It Works
HTML Structure: We create a container that holds two divs with the class
.box. These boxes will respond to mouse movements.CSS Styling: We set up the layout with Flexbox for centering. Each box is styled with a dark background and rounded corners. The
::beforepseudo-element is crucial for the ripple effect—it starts with a width and height of zero and expands on hover.JavaScript Functionality: The JavaScript captures mouse movements over each box. When the mouse moves, it calculates the position relative to the box and updates the CSS custom properties
--xand--y. This determines where the ripple effect originates.
Conclusion
The Cursor In & Out Ripple Effects not only enhance the aesthetic appeal of your website but also improve user interaction. By following the steps outlined in this post, you can easily implement this effect on your site. Experiment with colors, sizes, and timings to create a unique experience for your users.
Feel free to share your thoughts and any modifications you make to the effect in the comments below! Happy coding!
Pingback: Javascript Cursor Move Effects - TechyTechs
Pingback: Pure CSS Split Slider | CSS Only - TechyTechs