Simple Mouse Cursor Effects using JavaScript

Simple Mouse Cursor Effects using JavaScript (Free Code)

Mouse Cursor Effects JavaScript

In this tutorial, you will learn how to create Mouse Cursor Effects using JavaScript. Earlier I showed you how to create a custom mouse follow.

A type of JavaScript Mouse Cursor Effect you can easily use in your project or website. This animation can be seen when you change the position of your mouse cursor. This Mouse Cursor effect is very easy to create. 

Made using only HTML CSS and a certain amount of JavaScript. Here is a small colorful point created which is the cursor of your mouse. It will be very close. That point will change its position when you move your mouse.

How to Create Cursor Effects using JavaScript

Different color gradient animations have been added to those small points. That point changes its color every second.

Below is a demo that will help you learn how this JavaScript Mouse Cursor effect works. Here you will find the required source code and preview.

See the Pen
Cursor Animation by Foolish Developer (@foolishdevweb)
on CodePen.

Hopefully, the preview above has helped you to know how it works. You can copy the required source code from the box above and use it in your own work. 

Or you can follow the complete tutorial below. If you are a beginner then you can follow the tutorial below. Only HTML CSS JavaScript is used here.

Step 1: Basic structure of mouse cursor

Here I have used only one line of HTML code. Small colorful points have been created by that HTML code.

<div class=”cursor”></div>

The webpage is designed with the following CSS. Here I have used blue as the background color of the webpage.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: “Poppins”, sans-serif;
}
body{
  height: 100vh;
  background: #000115;
  cursor: none;
}
.main{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

Step 2: Design the cursor and add animation

I have designed small colorful points using the following codes. At this point width: 20px, height: 20px and border-radius: 50% has been used to make it completely round. 

I have added the required colors using box-shadow to add gradient color with it. Here I have used three colors. You can change the colors according to your needs. 

The 5-second animation is used here, meaning that the colors you add can be seen again every five seconds.

.cursor{
  z-index: 999;
  position: fixed;
  background: #2696E8;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 20px #2696E8,
              0 0 60px #2696E8,
              0 0 100px #2696E8;
  animation: colors 5s infinite;
  transform: translate(-50%, -50%);
  display: none;
}
@keyframes colors{
  0%{
    filter: hue-rotate(0deg);
  }
  100%{
    filter: hue-rotate(360deg);
  }
}
.cursor:before{
  content: ”;
  position: absolute;
  background: #2696E8;
  width: 50px;
  height: 50px;
  opacity: 0.2;
  transform: translate(-30%, -30%);
  border-radius: 50%;
}

Step 3: Activate Mouse Cursor Effects with JavaScript

Now is the time to implement some projects using JavaScript (Mouse Cursor Effects using JavaScript). The JavaScript used here is relatively difficult. To understand this javascript you need to have a basic idea about js.

Although I have left with the necessary explanations for each line. Hopefully, that explanation will help you understand how this Mouse Cursor Effects JavaScript has been activated.

const cursor = document.querySelector(“.cursor”);
    var timeout;
    //follow cursor on mousemove
    document.addEventListener(“mousemove”, (e) => {
      let x = e.pageX;
      let y = e.pageY;
      cursor.style.top = y + “px”;
      cursor.style.left = x + “px”;
      cursor.style.display = “block”;
      //cursor effects when mouse stopped
      function mouseStopped(){
        cursor.style.display = “none”;
      }
      clearTimeout(timeout);
      timeout = setTimeout(mouseStopped, 5000);  
    });
    //cursor effects when mouseout
    document.addEventListener(“mouseout”, () => {
      cursor.style.display = “none”;
    });

Hopefully, you can create these Animated Cursor Effects using the tutorials and code above. If there is any problem then use the download button below. 

If you have any information, you can ask me on Instagram. Please comment on how you like this Mouse Cursor Animation Effects.