90’s Cursor Move Effects In Pure JavaScript

Category: Animation , Javascript | February 10, 2024
Author:tholman
Views Total:185 views
Official Page:Go to website
Last Update:February 10, 2024
License:MIT

Preview:

90’s Cursor Move Effects In Pure JavaScript

Description:

This package provides eight 90’s retro cursor move effects implemented in pure JavaScript.

Cursor effects included:

  1. Bubbles (Demo)
  2. Emoji  (Demo)
  3. Fairy Dust (Demo)
  4. Following Dot
  5. Ghost (Demo)
  6. Snowflakes (Demo)
  7. Tailing
  8. Rainbow
  9. Clock Cursor
  10. Text Flag
  11. Clock
  12. 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.15 (02/10/2024)

  • Added options to change days/months text in clock cursor

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

You Might Be Interested In:


Leave a Reply