Custom Cursor Design: HTML, CSS, and JavaScript Guide @rayen-code

Rayen

The cursor is a fundamental element of user interaction on websites. Adding a unique and visually appealing custom cursor can enhance the overall user experience and make your website stand out. In this tutorial, we'll guide you through the process of creating a custom cursor design using HTML, CSS, and JavaScript.




Step 1: HTML Markup:

Start by setting up the basic HTML structure for your custom cursor design. 
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link rel="stylesheet" href="style.css">
    <title>Custom Cursor Disign</title>
    <style>
      
    </style>
</head>
<body>

<i id="cursor" class="fa-solid fa-arrow-pointer"></i>

    

<script src="main.js"></script>
</body>
</html>

Step 2: Styling with CSS:

Create a separate CSS file (style.css) to style the custom cursor and define its appearance.
/*-------------------- CSS --------------------*/
/* style.css */

body{
    min-height: 100vh;
    background: #1b1b1b;
    cursor: none;
}

#cursor{
    color: #fff;
    font-size: 2rem;
    position: absolute;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    animation: anime 5s linear  infinite;
}

@keyframes anime {
    0%{
        filter: drop-shadow(0 0 5px #eeff00)
        drop-shadow(0 0 10px #eeff00)
        drop-shadow(0 0 20px #eeff00)
        hue-rotate(0deg);
    }
    100%{
        filter: drop-shadow(0 0 5px #eeff00)
        drop-shadow(0 0 10px #eeff00)
        drop-shadow(0 0 20px #eeff00)
        hue-rotate(360deg);
    }
}

body:hover #cursor{
    opacity: 1;
}

Step 3: Adding JavaScript Interaction:

Create a JavaScript file (main.js) to handle the cursor's movement based on the user's mouse position.
//-------------------- Java Script --------------------//
// main.js
let cursor = document.getElementById("cursor");

document.addEventListener("mousemove", (m)=>{
    cursor.style.top = m.pageY + "px";
    cursor.style.left = m.pageX + "px";
});

In the CSS section, we've styled the custom cursor to be a simple circle with the desired color. The JavaScript section ensures that the cursor follows the user's mouse movements on the screen.

You can customize the cursor's size, shape, color, and even add animations to match your website's design. Consider adding transitions to the cursor's movement for a smoother effect.

Congratulations! You've successfully created a custom cursor design using HTML, CSS, and JavaScript. This unique element can significantly enhance the visual appeal of your website and provide users with a memorable browsing experience.

Feel free to experiment with different cursor shapes, colors, and movements to create a custom cursor that complements your website's style. By implementing this feature, you've gained a valuable skill that can help you create more engaging and interactive user interfaces.

0 Comments