90’s Cursor Move Effects In Pure JavaScript

Category: Animation , Javascript | September 26, 2022
Author:tholman
Views Total:8 views
Official Page:Go to website
Last Update:September 26, 2022
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

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/emojiCursor.js"></script>
<script src="js/fairyDustCursor.js"></script>
<script src="js/followingDotCursor.js"></script>
<script src="js/ghostCursor.js"></script>
<script src="js/snowflakeCursor.js"></script>
<script src="js/springyEmojiCursor.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.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