Cursor Movement Effects

Animate elements on mouse move.

How to

The Cursor Movement Effects plugin is used to animate elements while the mouse moves over a target.

The CursorFx object is used to initialize the plugin. The cursor-movement-effects.js file includes the initialization of the CursorFx object for demo purposes:

(function() {
  // demo code - initialize the CursorFx element
  var cursorFx = document.getElementsByClassName('js-cursor-fx-target');
  if(cursorFx.length > 0) {
    var obj1 = document.getElementsByClassName('js-cursor-fx-object-1');
    var obj2 = document.getElementsByClassName('js-cursor-fx-object-2');
    var objects = [];
    if(obj1.length > 0) {
      objects.push({element: obj1[0], effect: 'parallax', delta: '20'});
    }
    if(obj2.length > 0) {
      objects.push({element: obj2[0], effect: 'parallax', delta: '10', direction: 'follow'});
    }

    new CursorFx({
      target: cursorFx[0],
      objects: objects
    });
  }
}());

When initializing the CursorFx object, you need to pass the following options:

• target: the plugin detects cursor movement over the target element;
• objects: an array of elements to animate while moving over the target.

Each item in the objects array should include:

• element: the element to animate;
• effect: the animation effect. It can be 'parallax' or 'follow'. 

Parallax effect #

Use this effect to translate the object while the cursor moves over the target.

When using the parallax effect, also specify:

• delta: this is the maximum movement of the element. E.g., if delta is 20, the element translate will be between 20px and -20px;
• direction: this can be set to follow. When using follow, the object will move in the same direction of the mouse. If no direction option is set, the object will move in the opposite direction.

new CursorFx({
  target: cursorFx,
  objects: [
    {element: obj1, effect: 'parallax', delta: '20'},
    {element: obj2, effect: 'parallax', delta: '10', direction: 'follow'}
  ]
});

Follow effect #

Use this effect if you want an object to follow the position of the mouse.

new CursorFx({
  target: cursorFx,
  objects: [
    {element: obj1, effect: 'follow'}
  ]
});

Categories

• Plugins > Misc

Bug report & feedback

Component Github page ↗