Custom Cursor Behaviors In Pure JavaScript – control-user-cursor

Preview:

Description:

A standalone JavaScript library which replaces the default cursor with your own styles and applies ‘repel’ and ‘attract’ cursor behaviors to target elements on hover.

How to use it:

Import the main JavaScript file into your web project.

<script src="index.js"></script>

Initialize the control-user-cursor and specify the behavior & target element in the JavaScript as shown below:

ControlUserCursor({
  el: {
    buttonToPrevent: {
      behavior: 'REPEL',
      el: document.querySelector('.element-to-repel')
    },
    buttonToAttract: {
      behavior: 'ATTRACT',
      el: document.querySelector('.element-to-attract')
    }
  }
});