Cursor.js

All you need to do is add the dist cursor.min.js file into your projects JS folder and add the following code with your cursor.js location as the src. Put this code in to your head HTML tags. Download Cursor.js here or use npm.

                            <script src="/js/cursor.min.js"></script>
                    

Or just add a CDN instead

                        <script src="https://cdn.jsdelivr.net/npm/@idevgames/cursor-js/src/cursor.min.js"></script>
                    

To activate cursor.js add the data attribute "data-cursor" or a class "enable-cursor" to your html element. To trigger animations cursor.js will place a class of "cursor" onto your element when the mouse is hovering over it, as well as "cursor-enter-top", "cursor-enter-bottom", "cursor-enter-left", or "cursor-enter-right" depending from which direction the cursor entered.

                            <div class=" data-cursor> </div>
                    

                        .fadeIn{ opacity:0; }
                        .fadeIn.cursor{ animation: fadeIn 1s normal forwards ease-in-out; }
                        @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }
                    

Cursor.js calculates the percentage of cursor position on the element and creates CSS variables that you can use with CSS transform etc.

                            <div class="element" data-cursor data-cursor-var="true"> </div>
                    

                            .element{ transform: translateX( var(--cursor-x) ); }
                    

The CSS variables you can use by adding data-cursor-var="true", data-cursor-pixels="true" or data-cursor-degrees="true" are:

The data attribute will also update in increments of 10 so you can use CSS attribute selectors like [data-cursor-var-x="50"]{ } for more control.

Cursor.js creates classes of "cursor-moving-up", "cursor-moving-down", "cursor-moving-left", or "cursor-moving-right" onto the body of the document depending on the last cursor movement direction.

Cursor.js creates classes of "cursor-active" or "cursor-idle" onto the body of the document depending on cursor activity. When the mouse button is pressed, the class "cursor-down" is added to the body element.

You can use the below data attributes for additional features

                            <div id="yourelement" data-cursor-min="-100" data-cursor-max="100" data-cursor-offset="0" data-cursor-negativeOffset="0" data-cursor-height="0" data-cursor-global="false" data-cursor> </div>