Source Code of Custom Cursor

Page Contents

This project is a simple web application that enhances the user experience by implementing a custom cursor. Rather than the default cursor, it provides users with a customized cursor that follows their mouse movements. The project consists of an HTML file for the structure, a CSS file for styling, and a JavaScript file for cursor movement logic. Below, we provide an optimized version of the code with comments to explain each step.

Folder Structure

Codes

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Cursor | Cosas Learning</title>
    <!-- Importing the CSS file -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Custom Cursor -->
  <span id="cursor"></span>
  <!-- Importing the JavaScript file -->
  <script src="script.js"></script>
</body>   
</html>

The HTML file sets up the structure of the web page, including references to an external CSS file (style.css) for styling and an external JavaScript file (script.js) for cursor movement logic.
It includes a span element with the id of “cursor” to represent the custom cursor on the page.

CSS

/* CSS styles optimized for the project */

/* Base styling */
* {
    margin: 0;
    padding: 0;
    cursor: none;
}

/* Variable definitions */
:root {
    /* Colors */ 
    --cursor_color: linear-gradient(to top left, #ef536d, #c1c636);
    --background_color: linear-gradient(to top left, #b156d9, #213780);
}

/* Body styling */
body {
    background: var(--background_color);
    overflow: hidden;
    height: 100vh;
}

/* Cursor styling */
#cursor {
    position: absolute;
    background:var(--cursor_color);
    height: 2rem;
    width: 2rem;
    border-radius: 0% 100% 0% 100% / 0% 100% 0% 100%;
    transform: translate(-100%, -100%);
    pointer-events: none;
    transition: all 0.1s ease-out;
}

The CSS file defines styles optimized for the custom cursor project.
It sets the base styling to remove default margins and paddings and hides the system cursor (cursor: none;).
CSS variables (--cursor_color and --background_color) are defined for cursor and background colors.

The cursor is styled as a circular element with a gradient color.

JavaScript

// Variables
const cursor = document.getElementById('cursor');

let cursorX = 0, cursorY = 0;


// Function to move custom cursor
const moveCursor = (e) => {
    cursorX = e.clientX;
    cursorY = e.clientY;
    cursor.style.top = `${cursorY}px`;
    cursor.style.left = `${cursorX}px`;
};

// Add event listener for mouse move
document.addEventListener('mousemove', (e) => {
    moveCursor(e);
});

The JavaScript file defines variables and a function to move the custom cursor based on mouse coordinates.
It listens for mouse movements and updates the cursor’s position accordingly.

This web application enhances user interaction by providing a custom cursor that follows their mouse movements. It creates a visually appealing experience by replacing the default cursor with a customized circular element. The code structure and functionality have been optimized and well-commented for clarity and functionality. You can further customize the cursor’s appearance and behavior to suit your specific project requirements.