About escursors
escursors is a lightweight and easy-to-use library that provides a collection of custom cursors for your web applications. With escursors, you can quickly enhance the user experience by replacing the default cursor with a variety of stylish and animated cursors.
Features
- Offers a library of high-quality custom cursors
- Animated cursors that add interactivity to your application
- Easy integration with existing web applications
- Customizable options for cursor appearance, size, and behavior
- Lightweight and optimized for performance
Installation
To use escursors in your web project, you can either download the library files manually or include it from a CDN. Follow the steps below to start using escursors:
Download manually
1. Download the escursors library from the official GitHub repository.
https://github.com/escursors/escursors/releases
2. Extract the downloaded ZIP file to your project directory.
3. Include the necessary CSS and JavaScript files in your HTML.
<link rel="stylesheet" href="path/to/escursors.min.css" /> <script src="path/to/escursors.min.js"></script>
4. You are now ready to use escursors in your project!
Using a CDN
You can include the escursors library directly from a CDN like the example below:
<link rel="stylesheet" href="https://cdn.example.com/escursors.min.css" /> <script src="https://cdn.example.com/escursors.min.js"></script>
Ensure that you replace “https://cdn.example.com” with the actual CDN URL.
Usage
Using escursors in your web application is straightforward. Follow the steps below to get started:
Initialization
After including the escursors library in your HTML, you need to initialize it by invoking the escursors.init()
function.
<script> // Initialize escursors escursors.init(); </script>
Cursor Selection
You can select the desired cursor by applying one of the available classes to the target element. Here is an example:
<!-- Create a div element with the "cursor-arrow" class --> <div class="cursor-arrow"></div>
In this example, the cursor of the div element will be changed to the “arrow” cursor upon hovering.
Customization
You can customize the appearance and behavior of escursors using CSS variables. Below are some of the available options:
- –escursors-cursor-size: Adjusts the size of the cursor elements. Default: 18px
- –escursors-animation-duration: Changes the duration of cursor animations. Default: 0.3s
- –escursors-animation-function: Sets the timing function of cursor animations. Default: ease-in-out
- –escursors-cursor-color: Defines the color of the cursor elements. Default: #000
To customize any of these CSS variables, simply define their value in your CSS file or style block:
<style> :root { --escursors-cursor-size: 20px; --escursors-cursor-color: #ff0000; } </style>
Feel free to experiment and modify these variables according to your application’s requirements.
Examples
Here are some examples of how you can use escursors in your web applications:
Change Cursor on Button Hover
Add an animated cursor to a button when the user hovers over it:
<style> /* Define the custom cursor animation */ .cursor-example-button:hover { cursor: none; animation: cursor-pulse 1s infinite; } /* Keyframes for the cursor animation */ @keyframes cursor-pulse { 0% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.2); opacity: 0.4; } 100% { transform: scale(1); opacity: 0.8; } } </style> <!-- Create a button with a custom cursor --> <button class="cursor-example-button cursor-arrow">Hover Me</button>
Create Interactive Elements
Make interactive elements like links more engaging with custom cursors:
<!-- Style the link with a custom cursor --> <a href="#" class="cursor-link">Click Me!</a>
In this example, the link will have a custom cursor appearance upon hovering.
Support
If you encounter any issues, have questions, or want to contribute to escursors, you can find more information and get support through the following channels:
- GitHub repository: https://github.com/escursors/escursors
- Issue tracker: https://github.com/escursors/escursors/issues
- Email support: support@escursors.com
We appreciate your feedback and contributions to help improve escursors for everyone!