Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Cursor Trail Effect</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2c2a2a;
font-family: monospace;
}
.terminal {
position: relative;
width: 450px;
height: 500px;
background-color: #1e1e1e;
border-radius: 10px;
overflow: hidden;
border: 2px solid #444;
padding: 20px;
cursor: none;
}
.terminal::before {
content: '';
position: absolute;
top: 10px;
left: 15px;
display: flex;
gap: 10px;
}
.terminal::before {
content: '';
position: absolute;
top: 10px;
left: 10px;
width: 10px;
height: 10px;
background-color: yellow;
border-radius: 50%;
box-shadow: 20px 0 0 red, 40px 0 0 blue;
}
.trail {
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: rgba(15, 11, 212, 0.7);
box-shadow: 0 0 2px 2px white;
pointer-events: none;
animation: fade 3s linear forwards;
}
@keyframes fade {
0% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(0); }
}
.instructions {
color: #fff;
position: absolute;
bottom: 10px;
left: 20px;
}
</style>
</head>
<body>
<div class="terminal" id="terminalBox">
<div class="instructions">Move your cursor inside the box to see the trail effect</div>
</div>
<script>
const terminalBox = document.getElementById('terminalBox');
// Create the rope-like effect by generating multiple particles
terminalBox.addEventListener('mousemove', (e) => {
const rect = terminalBox.getBoundingClientRect();
// Create a small circle (trail)
const trail = document.createElement('div');
trail.className = 'trail';
terminalBox.appendChild(trail);
// Set the trail position relative to the terminal box
trail.style.left = `${e.clientX - rect.left - 5}px`; // -5 to center the circle
trail.style.top = `${e.clientY - rect.top - 5}px`;
// Remove the trail element after the animation ends
setTimeout(() => trail.remove(), 1000); // The time here matches the animation duration in CSS
});
</script>
</body>
</html>
Top comments (0)