90’s Cursor Move Effects In Pure JavaScript

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

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:

04/24/2022

  • a dot that simply follows the mouse

02/07/2022

  • trailing cursor

You Might Be Interested In:


Leave a Reply