Today I will tell you in detail how I made this:
So as you can see. I will be telling you how to make a mouse trailer
Basic setup
It is pretty simple to make the navbar, generally we don't see navbars with backgrounds. They generally have transparent background. But I got inspiration from one of the websites I recently saw and I needed to remake it. I started off by having a good looking sizing. Cause it should look perfect not lacky. Then I gave it vibrant colours that pop. Dodgerblue and yellow was a good looking pair. Next I got the icons from font awesome. aligned them gave them colour and a hover effect. I thought it would be cool if I threw a bunch of other effects on like the background changes when we hover on something. This was the basic setup
Mouse
First of all we need a pretty basic trailer to make it follow the mouse. I started off by making a 100 px wide square and then rounded it's edges to make a circle. Then I got the glassmorphism code from css.glass. After that I put Google icon inside that trailer. I dont know why. Then I centered it.
Tip: I always center things with one basic code:
display: flex;
align-items: center;
justify-content: center;
/* If you want them to be on top of each other */
flex-direction: column;
I just prefer that code for some reason
Then I set the position of the trailer fixed, so that it is fixed 🙄. I set the z-index to something big. Like 999999999999999999999999999999999.
Another important thing is to set the top and left to 0. This will get our mouse which will be following the mouse ready.
Make it follow 🚶♂️
Just enter this code
var trailer = document.getElementById("trailer");
window.onmousemove = (e) => {
document.getElementById("trailer").style.scale = "1";
const y = e.clientX + 20;
const x = e.clientY + 20;
const keyframes = {
transform: "translate(" + y + "px" + "," + x + "px)"
};
document.getElementById("trailer").animate(keyframes, {
duration: 800,
fill: "forwards"
});
};
Now what this code does basically is monitors the mouse's movement and then stores it. We then add 20 to the value and set it as the x and y position of the trailer in the form of an animation. We can do it basically but it's not so smooth and soothing. If you want it to be smooth. You will have to use animations. That's all if you followed my instructions you should get something to follow your mouse.
Guys now I want to ask you something what I should I tell you about next !
Top comments (7)
Looks cool! Thanks for sharing. For those who're really interested in fancy cursors, this extension is a pure Gem for them!
We want the cursors for our website. They can navigate the webpage or something like that. They are trailers
Like look at this website
I feel like this effect will just be confusing most of the time. It's prominent enough that people would assume it serves a function, but it doesn't. It looks cool, though.
It makes the certain website stand out from others, which is happy enough for a developer. In my perspective, I think small things are the most fun things 😊.
+2147483647 is the highest and -2147483647 is the lowest value z-index can have.
999999999999999999999999999999999 is unnecessary.
It's for fun 😊