90’s Cursor Move Effects In Pure JavaScript

Category: Animation , Javascript | April 1, 2019
Author: tholman
Views Total: 395
Official Page: Go to website
Last Update: April 1, 2019
License: MIT

Preview:

90’s Cursor Move Effects In Pure JavaScript

Description:

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

Cursor effects included:

  1. Bats (Demo)
  2. Bubble (Demo)
  3. Emoji  (Demo)
  4. Fairy Dust (Demo)
  5. Ghost (Demo)
  6. Snowflakes (Demo)

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/batsCursor.js"></script>
<script src="js/bubbleCursor.js"></script>
<script src="js/emojiCursor.js"></script>
<script src="js/fairyDustCursor.js"></script>
<script src="js/ghostCursor.js"></script>
<script src="js/snowflakeCursor.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();
})();

You Might Be Interested In:


Leave a Reply