You are currently viewing Custom Cursor With Mouse Hover Effects Using HTML ,CSS And JavaScript

Custom Cursor With Mouse Hover Effects Using HTML ,CSS And JavaScript

Hello and welcome to the Code with Random Blogs. In this blog, we will use HTML, CSS, and JavaScript to create a custom cursor with a mouse hover effect. 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.

Custom Cursor With Mouse Hover Effects Using HTML ,CSS And JavaScript

Custom Cursor With Mouse Hover Effects
Custom Cursor With Mouse Hover Effects Using HTML ,CSS And JavaScript

 

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 that was created solely with HTML.

Output:

Custom Cursor With Mouse Hover Effects Using HTML

So we have added the HTML tags and Their contents, Now it’s time to make it attractive by adding the CSS code.

Ecommerce Website Using Html Css And Javascript Source 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 Cursor

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 below👇here is the output after styling our webpage.

Output:

Custom Cursor With Mouse Hover Effects Using HTML ,CSS
Custom Cursor With Mouse Hover Effects Using HTML ,CSS

Step3: javascript code For  Sidebar Dropdown Menu

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.

Output: 

Codepen Preview of Custom Cursor With Mouse Hover Effects Using HTML ,CSS And JavaScript

Now We have Successfully created our Custom Cursor with mouse hover effect  poject. You can use this project for your personal porfolio to make it more appealing .WE hope you understood the project , If you any doub’t feel free to comment!!

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By : @arun
Code by : @Abdumalik

Leave a Reply