I followed a tutorial to create a mouse trailer from this video - https://www.youtube.com/watch?v=kySGqoU7X-s. However, when I tried adding text and other elements inside a div, the blur effect just didn't show up. I attempted using z-index but it didn't work... as I am relatively new, I'm not sure what else to try. This is crucial for my portfolio.
CSS
body {
background-color: black;
height: 100vh;
margin: 0rem;
overflow: hidden;
}
.text{
color:aquamarine;
z-index : 99;
}
@keyframes rotate {
from {
rotate: 0deg;
}
50% {
scale: 1 1.5;
}
to {
rotate: 360deg;
}
}
#blob {
background-color: white;
height: 34vmax;
aspect-ratio: 1;
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
border-radius: 50%;
background: linear-gradient(to right, aquamarine, mediumpurple);
animation: rotate 20s infinite;
opacity: 0.8;
}
#blur {
height: 100%;
width: 100%;
position: absolute;
z-index: 2;
backdrop-filter: blur(12vmax);
}
JavaScript
const blob = document.getElementById("blob");
window.onpointermove = event => {
const { clientX, clientY } = event;
blob.animate({
left: `${clientX}px`,
top: `${clientY}px`
}, { duration: 3000, fill: "forwards" });
}
HTML
<html lang="en">
<head>
<title>PORTfolio</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="header">
</div>
<div class="text">
<h1>Found me?</h1>
<button>Know more then</button>
</div>
<div>
<div id="blob"></div>
<div id="blur"></div>
</div>
</body>
<script src="script.js"></script>
</html>