In this blog post you’ll how to create a cursor tail using HTML, CSS, and JavaScript. This colourful mouse cursor tail or trail forms when a user moves their cursor around your website.
A cursor tail is a fun and interactive way to add visual appeal to your website. It can also be used to guide users to specific areas of your page or track the cursor movement and make it easier to see and find the cursor. In this blog post, you'll learn how to create a cursor tail using HTML, CSS, and JavaScript.
What is a cursor tail?
Here's a cursor tail is a trail of dots that follows your mouse cursor as you move it around a web page. The dots in different colors and sizes, and they can fade out over time (few milliseconds) . This creates the effect of a tail trailing behind your cursor. You can see demo in below youTube video.
Here's what you'll learn:
- How to create a basic cursor tail using HTML and CSS
- How to add animation to your cursor tail
- How to customize the appearance of your cursor tail
- How to use JavaScript to control your cursor tail
- How to use JavaScript to get cursor position and create and append new element in web page.
Video Tutorial on Mouse Cursor Trail.
Cursor Tail.
So how we going to make this dynamically colourful cursor tail?
So first we going to define two variables, first is colours for array in which we going to add different colours and second variable is i for number (integer) which is going to increment by one.
After that we run a function on mouseover event on document. In that function first we going to increment the i variable, then we form new element (which is span tag, this span tag we going to show like a tail or trail of cursor).
After creating span tag, we add one class in it for styling and animation. And also add some styling through JavaScript also to make the span tag position (top and left) at cursor position so that span tag form at a cursor point.
And also add background colour to span tag from array according to incremented i variable value. And also add one condition that when i variable value is equal to array length the we set i variable value to 0 (as initial) for restart the color sequence.
After that we going to append it in document body. So that it visible in website or web page. We also have to remove it, after some few milliseconds, so for that we use set timeout function.
So that's a short description read further for more detail.
Now let’s make this beautiful cursor trail step by step.
First create basic structure. Create one folder, open it in your code editor and create files in it.
Files to create.
- Index.html
- Index.css
Create basic structure of html and link CSS file. I have also added JavaScript which is added within the html files.
Step 1: Create new elements on mouse move to form tail or trail like structure.
So first let’s define variables. One for array which is for different colours. And second one is integer with initial value 0 (which will be incrementing by 1 when function run), this value use to get the different colour form array.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
</body>
</html>
JavaScript
let colors = ["red","yellow","blue","green","violet","orange","pink","brown"];
let i = 0;
Now create function which run on mouse move event, in that function we going to increment i variable value by 1 and create new element which is span tag. That’s going to look like colourful tail of cursor.
JavaScript
document.onmousemove = function(e){
i++;
let span = document.createElement("span");
}
Step 2: Add styling and animation to that newly created element.
After creating an element we'll add class in it for styling and animation, and also add top and left position according to cursor x and y coordinate positions.
And for different colour in tail, we going to add background colour from array according to i variable value.
And also set condition to i variable value, that when its equal to array length. it starts again from first colour in array. (for repeating colour if not further left in array).
JavaScript
document.onmousemove = function(e){
i++;
let x = e.pageX;
let y = e.pageY;
let span = document.createElement("span");
span.classList.add("follower");
span.style.top = y + "px";
span.style.left = x + "px";
span.style.backgroundColor = colors[i - 1];
document.body.appendChild(span);
if(i == colors.length){
i = 0;
}
}
CSS
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
height: 100vh;
background-color: #fff;
}
.follower{
position: absolute;
width: 50px;
height: 50px;
margin-top: -25px;
margin-left: -25px;
pointer-events: none;
border-radius: 50%;
opacity: 0;
animation-name: follower_animation;
animation-duration: 0.8s;
}
@keyframes follower_animation {
from{
opacity: 1;
transform: scale(0);
}
to{
opacity: 0;
transform: scale(1);
}
}
Step 3: Removing the newly created element.
Now let’s remove that newly created element (span tag). Because we don’t want to stay that newly created element all the time when mouse isn’t moving. And if we don’t remove it, the page weight will may increases because of so many spare span tags.
JavaScript
document.onmousemove = function(e){
i++;
let x = e.pageX;
let y = e.pageY;
let span = document.createElement("span");
span.classList.add("follower");
span.style.top = y + "px";
span.style.left = x + "px";
span.style.backgroundColor = colors[i - 1];
document.body.appendChild(span);
if(i == colors.length){
i = 0;
}
setTimeout(() => {
span.remove();
}, 1000);
}
So that’s its colourful cursor trail is ready using html CSS and JavaScript. You can see demo in above YouTube video.
You may like:
- How to create a simple mouse click effects using JavaScript.
- How to create ballon effect on a mouse click using JavaScript.
Final code:
So that’s how you can create awesome colourfull cursor tail animation using HTML CSS and JavaScript. If you have any query or suggestion you can write in comment section.
Thank you for reading this far.
Share your thoughts.