Hello and welcome to the Codewithrandom Blogs. In this blog, we will create a Custom Mouse Cursor with a hover effect using html, css, and javascript. We'll make a custom cursor, and when the user hovers the cursor over an element, the zoom circle effect with text movement will appear.
To emphasize particular website elements, users can create their own cursors. These personalized cursors are used to both improve the website's content's readability and to attract users' attention to a particular section of the site.
I hope you must have got an idea about the project.
So, let's get started on the Custom Cursor Project by adding the source codes. First, we're going to use HTML code.
Step1: HTML code for Custom Cursor
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Read More Button</title>
<link href="https://fonts.googleapis.com/css?family=Russo+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
<body>
<div class="nav-wrapper">
<nav>
<a href="#" class="hover-this"><span>Home</span></a>
<a href="#" class="hover-this"><span>Our Story</span></a>
<a href="#" class="hover-this"><span>Studio</span></a>
<a href="#" class="hover-this"><span>Contact</span></a>
<div class="cursor"></div>
</nav>
</div>
<script src="index.js"></script>
</body>
</html>
First, we create a div with the (nav-wrapper) class to hold our navbar content. In this project, we used JavaScript to create a navbar that will be used to displayed the mouse effect.
Now we'll use the nav tag to create the navbar, which will contain four anchor tags.
We'll use a span tag inside the anchor tag to specify the various navbar buttons, such as home, our story, studio, and contact.
We also created a blank div tag to create our custom cursor.
Now, just before the end of our body, we'll add a link to our JavaScript.
<script src="index.js"></script>
Let's take a look at our output which was created solely with HTML.
So we have added the HTML tags and Their contents, Now it’s time to make it attractive by adding the CSS code.
Before we can style our page, we must add the Google Fonts and external styling links to the head section of our html.
<link href="https://fonts.googleapis.com/css?family=Russo+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css" />
Step2: CSS Code for Custom Mouse Cursor Effects
Cascading Style Sheets (CSS) is a markup language for describing the presentation of a document written in HTML or XML. CSS, like HTML and JavaScript, is a key component of the World Wide Web.
Now we will look at our CSS code
html, body {
margin: 0;
padding: 0;
cursor: none;
}
.nav-wrapper {
width: 100%;
height: 100vh;
background: #161616;
}
nav {
width: 100%;
margin: 0 auto;
text-align: center;
position: absolute;
top: 50%;
}
.hover-this {
transition: all 0.3s ease;
}
span {
display: inline-block;
font-family: 'Russo One', sans-serif;
font-weight: 400;
color: #fff;
font-size: 36px;
text-transform: uppercase;
pointer-event: none;
transition: transform 0.1s linear;
}
.cursor {
pointer-events: none;
position: fixed;
padding: 0.3rem;
background-color: #fff;
border-radius: 50%;
mix-blend-mode: difference;
transition: transform 0.3s ease;
}
.hover-this:hover ~ .cursor {
transform:translate(-50%, -50%) scale(8);
}
@media(min-width: 900px) {
nav {
display: flex;
justify-content: space-around;
}
}
@media(max-width: 900px) {
nav {
top: 30%;
}
.hover-this {
width: 100%;
padding: 20px 0;
display: inline-block;
}
}
Now that we've included our CSS code in our article, let's go over it step by step.
**Step1:** To begin, we'll set the padding and margin to zero using the html and body tags. We also set the cursor to be none.
html, body {
margin: 0;
padding: 0;
cursor: none;
}
Step2: Using the class selector (.nav-wrapper), we will now set the width to "100%," the height to "100vh," and the background colour to "black".
.nav-wrapper {
width: 100%;
height: 100vh;
background: #161616;
}
Step3: Now using the nav tag we will the width as "100%" of our navbar . The margin for top and bottom is set to zero and for left and right as "auto". Using the text aligned property we will align the text at the center. The position is also defined as "absoute" . We also leave the half of the space from the top using top (50%).
nav {
width: 100%;
margin: 0 auto;
text-align: center;
position: absolute;
top: 50%;
}
Step4: The ".hover-this" class is used to add the ease transition to our anchor elements. Now, we'll style the various navbar contents with the span tag. We set the display to "inline-block." The font family is set to "Russo One," and the font weight is set to "400." We set the font size to "36px." Using the text-transform property, we now convert all of the content to "uppercase." We also included a linear transition for 0.1s.
.hover-this {
transition: all 0.3s ease;
}
span {
display: inline-block;
font-family: 'Russo One', sans-serif;
font-weight: 400;
color: #fff;
font-size: 36px;
text-transform: uppercase;
pointer-events: none;
transition: transform 0.1s linear;
}
Step5: We now set the pointer events to "none" by using the ".hover" class. We set the position to fixed, padding to 0.3 rem, and background colour to "white." The border radius was also set to 50%. We added 0.3s to make the transition easier. Using the hover selector on our ".cursor" class, we added the transform and scale properties to change the position and size of the element when the cursor is hovered over it.
.cursor {
pointer-events: none;
position: fixed;
padding: 0.3rem;
background-color: #fff;
border-radius: 50%;
mix-blend-mode: difference;
transition: transform 0.3s ease;
}
.hover-this:hover ~ .cursor {
transform:translate(-50%, -50%) scale(8);
}
Step6: Now we'll make our website more responsive. We define the maximum width as "900px" using the media query if the size of the window is equal to or less than the defined width. The top position of the navbar is set to 30%, and we use the (.hover-this) attribute to set the width to 100%, top and bottom padding to 20 px, and display to inline block.
@media(max-width: 900px) {
nav {
top: 30%;
}
.hover-this {
width: 100%;
padding: 20px 0;
display: inline-block;
}
}
Now we have completed our css code and belowhere is the output after styling our webpage.
Step3: Custom Mouse Cursor Effects JavaScript Code
Even after applying the CSS and HTML, our cursor won't work until we will not add the functionality to cursor.
Now let's take a look at our javascript code
(function () {
const link = document.querySelectorAll('nav > .hover-this');
const cursor = document.querySelector('.cursor');
const animateit = function (e) {
const span = this.querySelector('span');
const { offsetX: x, offsetY: y } = e,
{ offsetWidth: width, offsetHeight: height } = this,
move = 25,
xMove = x / width * (move * 2) - move,
yMove = y / height * (move * 2) - move;
span.style.transform = `translate(${xMove}px, ${yMove}px)`;
if (e.type === 'mouseleave') span.style.transform = '';
};
const editCursor = e => {
const { clientX: x, clientY: y } = e;
cursor.style.left = x + 'px';
cursor.style.top = y + 'px';
};
link.forEach(b => b.addEventListener('mousemove', animateit));
link.forEach(b => b.addEventListener('mouseleave', animateit));
window.addEventListener('mousemove', editCursor);
})();
To begin, we will create a function and, within it, two constant variables that will store the values of our that will be returned by our document query selector. Now we'll make a constant variable called "animateit" and a function with (e) as an object handler. Using this keyword, we will select our span element within the function. Now we'll make two objects (offsetX, offsetY) and store their values in our object handler. Now we'll make a variable move with the value 25.
Now, the condition in the xMove is for horizontal cursor movement, and the condition in the yMove is for vertical cursor movement. We will now add cursor movement using the span.style.transform method. We've also added a condition: if the object handler is equal to mouseleave, the cursor will only move to that point.
Using the edit cursor now adds the zoom effect to our text, and we've added a mouse event listener because moving the mouse causes the animation to start and stop.
We now have the functionality in our sidebar drop-down menu. Let's watch a quick video to see how it works.
Now We have Successfully created our Custom Mouse Cursor Effects JavaScript. You can use this project for your personal portfolio to make it more appealing. We hope you understood the project, If you have any doubts feel free to comment!!
If you find out this Blog helpful, then make sure to search code random on Google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.
Follow: codewithrandom
Written By : arun
Code by : Abdumalik
Top comments (0)