Make a Custom Cursor in JavaScript

Muhammad BilalMuhammad Bilal
1 min read

Table of contents

OUTPUT of the given code

Use the following code:

HTML code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Cursor</title>
    // Use this if you use seprate css
    <link rel="stylesheet" href="style.css">
    </head>
<body>
    <div class="main">
        <div class="cursor"></div>
        <h1 class="heading">Custom Cursor</h1>
    </div>
    // Use this if you use seprate JS file
    <script src="script.js"></script>
</body>
</html>

CSS code.

body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: black;
    font-family: Arial, Helvetica, sans-serif;
}
.main{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 700px;
    width: 100%;
    background-color: black;
}
.cursor{
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: white;
    border-radius: 100%;
    mix-blend-mode: difference;
}
.heading{
    font-size: 96px;
    color: white;
    font-weight: bold;
}

JavaScript code.

let main =  document.querySelector(".main");
let cursor = document.querySelector(".cursor");
main.addEventListener("mousemove", (axis) => {
    // You can use x instead of clientX
    cursor.style.left = `${axis.clientX}px`;
    // You can use y instead of clientY
    cursor.style.top = `${axis.clientY}px`;
})
0
Subscribe to my newsletter

Read articles from Muhammad Bilal directly inside your inbox. Subscribe to the newsletter, and don't miss out.

custom cursor in javascriptJavaScriptwebdevWeb DevelopmentWeb Designcustom cursorJavascript Projects

Written by

Muhammad Bilal
Muhammad Bilal

With a passion for creating seamless and visually appealing web experiences, I am Muhammad Bilal, a dedicated front-end developer committed to transforming innovative ideas into user-friendly digital solutions. With a solid foundation in HTML, CSS, and JavaScript, I specialize in crafting responsive and intuitive websites that captivate users and elevate brands. 📈 Professional Experience: In my two years of experience in front-end development, I have had the privilege of collaborating with diverse teams and clients, translating their visions into engaging online platforms. 🔊 Skills: Technologies: HTML5, CSS3, JavaScript, WordPress Responsive Design: Bootstrap, Tailwind CSS, Flexbox, and CSS Grid Version Control: Git, GitHub 🖥 Projects: I have successfully contributed to projects where my focus on performance optimization and attention to detail played a crucial role in delivering high-quality user interfaces. ✨ Continuous Learning: In the fast-paced world of technology, I am committed to staying ahead of the curve. Regularly exploring new tools and methodologies, I am dedicated to enhancing my skills and embracing emerging trends to provide the best possible user experience. 🎓 Education: I hold a BSc degree in Software Engineering from Virtual University, where I gained both technical skills and knowledge. 👥 Let's Connect: I am always open to new opportunities, collaborations, and discussions about the exciting possibilities in front-end development. Feel free to reach out via LinkedIn, Instagram, Facebook, Twitter, or professional email.