Author: | tholman |
---|---|
Views Total: | 7 views |
Official Page: | Go to website |
Last Update: | December 7, 2023 |
License: | MIT |
Preview:

Description:
This package provides eight 90’s retro cursor move effects implemented in pure JavaScript.
Cursor effects included:
- Bubbles (Demo)
- Emoji (Demo)
- Fairy Dust (Demo)
- Following Dot
- Ghost (Demo)
- Snowflakes (Demo)
- Tailing
- Rainbow
- Clock Cursor
- Text Flag
- Clock
- Character
How to use it:
Download & unzip the package.
Load a cursor move effect of your choice in the document. That’s it.
<script src="js/bubbleCursor.js"></script> <script src="js/characterCursor.js"></script> <script src="js/clockCursor.js"></script> <script src="js/emojiCursor.js"></script> <script src="js/fairyDustCursor.js"></script> <script src="js/followingDotCursor.js"></script> <script src="js/ghostCursor.js"></script> <script src="js/rainbowCursor.js"></script> <script src="js/snowflakeCursor.js"></script> <script src="js/springyEmojiCursor.js"></script> <script src="js/textFlag.js"></script> <script src="js/trailingCursor.js"></script>
It also provides a JS template that makes it easy to create your own cursor effects.
/*! * Cursor Name.js * -- 90's cursors collection */ (function cursorName() { var width = window.innerWidth; var height = window.innerHeight; var cursor = {x: width/2, y: width/2}; function init() { bindEvents(); } // Bind events that are needed function bindEvents() { document.addEventListener('mousemove', onMouseMove); window.addEventListener('resize', onWindowResize); } function onWindowResize(e) { width = window.innerWidth; height = window.innerHeight; } function onMouseMove(e) { cursor.x = e.clientX; cursor.y = e.clientY; } /** * Utils */ // Applies css `properties` to an element. function applyProperties( target, properties ) { for( var key in properties ) { target.style[ key ] = properties[ key ]; } } init(); })();
Changelog:
v1.0.13 (12/07/2023)
- Added a cool character cursor
v1.0.12 (08/27/2023)
- Updated options for ghost cursor
- Small fixes
v1.0.10 (02/03/2023)
- New options to the trailing cursor for trail count and image src
v1.0.9 (01/21/2023)
- Idling performance improvements
v1.0.8 (12/31/2022)
- Add text flag cursor effect
v1.0.7 (11/16/2022)
- Fix destroy function breaking esm imports
v1.0.6 (09/26/2022)
- Fixes small bug where two cursors would not correctly init without default options
v1.0.5 (09/22/2022)
- Optional destroy function to remove cursor
- Respects prefers reduced motion
v1.0.4 (08/21/2022)
- Added Clock Cursor
07/08/2022
- Add Rainbow Cursor
07/06/2022
- spring emoji and rollup updates
04/24/2022
- a dot that simply follows the mouse
02/07/2022
- trailing cursor