ADVERTISEMENT

Create Custom Cursor Using HTML,CSS and JavaScript

Telegram Group Join Now

ADVERTISEMENT

Create Custom Cursor Using HTML,CSS and JavaScript

Welcome to the codewithrandom blog. In this blog, we learn how to Create a Custom Cursor. We use HTML, CSS, and JavaScript for this Custom Cursor.

ADVERTISEMENT

ADVERTISEMENT

I hope you enjoy our blog so let’s start with a basic Html Structure for Custom Cursor.

HTML Code For Custom Cursor

<body>
    <section class="container"><h1>Click on Screen,Random!</h1></section>
    <section></section>
    <div class="cursor"></div>
</body>

There is all the Html code for the custom cursor. Now you can see output without css and javascript. then we write css and javascript for our custom cursor.

ADVERTISEMENT

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

ADVERTISEMENT

 
Custom Cursor Using HTML,CSS and JavaScript

 

CSS Code For Custom Cursor

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
* {
    cursor: none;
}
body {
    overflow-x: hidden;
}
section {
    min-height: 100vh;
    background-color: rgb(41, 42, 46);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
.cursor {
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0; /* border: 2px solid white; */ /* background-color: rgba(255, 255, 255, 0.356); */
    height: 30px;
    width: 30px;
    border-radius: 50px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.cursor::after,
.cursor::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    height: 10px;
    width: 10px;
    border-radius: 50px;
}
.cursor::before {
    background-color: rgb(255, 255, 255);
}
.cursor.click::before {
    animation: click 1s ease forwards;
    background-color: rgb(255, 255, 255);
}
@keyframes click {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(7);
    }
}

Now we complete our css section, Here is our updated output with html and css. in the next code section we cover our whole javascript code for Custom Cursor.

50+ HTML, CSS & JavaScript Projects With Source Code

ADVERTISEMENT

Custom Cursor Using HTML,CSS and JavaScript

 

JavaScript Code For Custom Cursor

const cursor = document.querySelector(".cursor");
window.addEventListener("mousemove", (e) => {
    cursor.style.left = e.pageX + "px";
    cursor.style.top = e.pageY + "px";
    cursor.setAttribute("data-fromTop", cursor.offsetTop - scrollY);
    // console.log(e)
});
window.addEventListener("scroll", () => {
    const fromTop = cursor.getAttribute("data-fromTop");
    cursor.style.top = scrollY + parseInt(fromTop) + "px";
    console.log(scrollY);
});
window.addEventListener("click", () => {
    if (cursor.classList.contains("click")) {
        cursor.classList.remove("click");
        void cursor.offsetWidth;
        // trigger a DOM reflow
        cursor.classList.add("click");
    } else {
        cursor.classList.add("click");
    }
});

This is all our small JavaScript Code for Custom Cursor. I hope you like this cursor, you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

Create a Spotify Clone Using HTML CSS & JavaScript

ADVERTISEMENT

Thank you

ADVERTISEMENT

Live Preview Of Custom Cursor Using HTML,CSS and JavaScript

Custom Cursor Using HTML,CSS and JavaScript

 

Portfolio Website using HTML and CSS (Source Code)

In this post, we learn how to Create Custom Cursor Using HTML, CSS, and JavaScript. If we did a mistake or any confusion please drop a comment to give a reply or help you in easy learning.

written by – codewithrandom/Anki

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT