90’s Cursor Move Effects In Pure JavaScript

Category: Animation , Javascript | February 3, 2023
Author:tholman
Views Total:701 views
Official Page:Go to website
Last Update:February 3, 2023
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. Bubble (Demo)
  2. Emoji  (Demo)
  3. Fairy Dust (Demo)
  4. Following Dot Cursor
  5. Ghost (Demo)
  6. Snowflakes (Demo)
  7. Springy Emoji Cursor
  8. Tailing Cursor
  9. Rainbow Cursor
  10. Clock Cursor
  11. Text Flag

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/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.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