Create Custom Cursor
What you will learn?
- Learn to create your very first custom cursor
- Learn to create a custom card
- Learn to create a simple scale hover effect
Quick Intro
Yesterday I was surfing through dribble feeds and there I saw a UI design that used custom cursor which was looking really cool.
So I thought why not re-create it. When I started to research for this project, I thought creating custom cursor is not easy but after spending 1hr of digging the internet I was able to create it.
So I will break down every hard part for you which I faced so you don’t have to waste time on stupid things.
When you should use the Custom Cursor?
Before we get started with the technical part I want to point out that don’t over-use custom cursor thing. And it does not fit with every type of website.
You can use it with your portfolio website projects or any kind of artistic website.
And you should not use it on professional websites like- E-commerce sites, local business sites, etc.
So let’s start with a little project without wasting much time. This project will help you get started with creating custom cursors.
Here’s what we are making:
<div class="cursor"></div>
<div class="card">
<div class="image-holder">
<img src="./images/Cat.jpg">
</div>
</div>
It’s simple HTML. I have created a div with class ” cursor “ that will be our actual cursor which we will design later with CSS.
/* General Styling */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
cursor: none;
}
body{
background-color: rgb(24, 23, 23);
color: wheat;
font-family: 'Poppins';
overflow: hidden;
font-size: 20px;
}
But before we start to add any styling we need to remove the default cursor. So to do that we use “cursor: none;” property. This removes the default cursor from the entire website.
And rest of the code is a general CSS rule-set for the entire page. It just removes default margin-padding and sets background-color, font-size, etc.
.image-holder img{
border-radius: 20px;
object-fit: cover;
opacity: 0.8;
width: 300px;
height: 400px;
box-shadow: 3px 11px 27px 0px rgba(0,0,0,0.75);
transition: all .5s ease-in-out;
}
.card {
display: flex;
align-items: center;
justify-content: center;
margin-top: 10%;
}
.card img:hover {
transform: scale(1.1);
}
.card class centers the entire card in the center of the screen using flexbox.
.image-holder is the class where all transition and box-shadow is being applied. And .card img:hover apply scale effect using transform: scale(1.1);
/* Cursor Styling */
.cursor{
position: absolute;
width: 30px;
height: 30px;
border:2px solid red;
border-radius: 50%;
pointer-events: auto;
z-index: 1;
backdrop-filter: grayscale();
}
.cursor-scale{
transform: scale(1.5);
}
.cursor class is very important for this entire example. In this class, we add the actual styling of the cursor which you want to display on the screen.
In this .cursor class we just added width, height, radius, and border styling. But there are two property which is important here- pointer-events: none; and backdrop-filter: grayscale();
// Grabing classes
let cursor = document.querySelector(".cursor");
let image_holder = document.querySelector(".image-holder");
// Adding Event listner to entire screen(window) so that
// cursor can move on mousemove
window.addEventListener("mousemove", animation);
This block of code just grabs ".cursor" and ".image-holder" and stores in a variable for later use.
And window.addEventListener("mousemove", animation); adds event listener on mousemove and calls function named animation which we will create in the latter part of the post.
// Function that make's red cursor move along
function animation (e){
cursor.style.top = e.pageY +20 + "px";
cursor.style.left = e.pageX + 35 + "px";
};
pageY is a mouse event property that returns the Y (vertical) coordinate in pixels of the event relative to the whole document(in this case whole page).
pageX does the same thing as pageY but returns the X(horizontal) coordinates.
And the above code takes up the coordinates from pageX and pageY and sets the top and left position for the cursor. And then we call this function on mousemove.
Function to Add Scaling & Color Effect
// Function to scale cursor
function cursor_scale(){
cursor.style.transform = "scale(3)";
cursor.style.borderColor = "black";
cursor.style.transition = " all 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19)";
cursor.style.transitionProperty = "background,transform";
};
The above code adds styling to the cursor that will be applied when the cursor will be over an image(card).
cursor.style.transitionProperty = "background,transform"; This transitionProperty applies transition to only that objects which you will mention.
Setting Back Normal Properties
// Function to Descale cursor
function cursor_descale(){
cursor.style.transform = "scale(1)";
cursor.style.borderColor = "red";
cursor.style.transition = " all 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19)";
cursor.style.transitionProperty = "background,transform";
};
This block of code just reverses the whole process when you are not hovering over image.