Cursor effect using HTML, CSS & JavaScript - Coding Torque

byPiyush Patil -
0

Cursor effect using HTML, CSS & JavaScript - Coding Torque

Cursor effect 

Hello Guys! In this blog, I'm going to explain to you how to make a cursor effect using HTML, CSS, and JavaScript. You can create this effect to make your website look cool. This will be a step-by-step guide. Let's get started 🚀.

Let's go step by step:

Step 1: HTML Code 


<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Cursor effect using JavaScript - @code.scientist x @codingtorque</title>

</head>

<body>
    <div class="cursor"></div>
</body>

</html>


Output Till Now


Step 2: CSS Code 


body {
    background: black;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: poppins;
  }
  
  .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%;
  }


Output Till Now


Cursor effect using HTML, CSS & JavaScript - Coding Torque

Step 3: JavaScript Code

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";
});

Final Output



If you want me to code any project or post any specific post, feel free to DM me at IG @code.scientist or @codingtorque

 If you have any doubt or any project ideas feel free to Contact Us 

Hope you find this post helpful💖 

 Written by: Coding Torque | Piyush Patil 

 Follow us on Instagram for more projects like this👨‍💻 
Tags:

Post a Comment

Previous Post Next Post