Enhanced Bootstrap Mouse

Custom Mouse PRO

Animate the CSS style based on cursor movement

Overview

By using mouse|mouse-x|mouse-y" you can create mouse-linked effects that reacts to mouse/pointer cursor movement.

Syntax

To create a mouse-based effect add data-fx="{mouse|mouse-x|mouse-y}:{effect} to your desired element.

  • mouse - change the values while mouse cursor is moving in both x and y axis
  • mouse-x - change the values while mouse cursor is moving in x axis
  • mouse-y - change the values while mouse cursor is moving in y axis

Examples

These are basic example with default options and behavior. To see more examples of what is possible check Options.

mouse

Change the values on both x and y axis cursor movement by using data-fx="mouse:{effect}".

Scale
Rotate
Opacity
<div data-fx="mouse:@scale[0;1]">Scale</div>
<div data-fx="mouse:@rotateZ[0;20deg]">Rotate</div>
<div data-fx="mouse:@translateY[0;50px]">Translate</div>

mouse-x

Change the values on x axis cursor movement by using data-fx="mouse-x:{effect}".

Scale
Rotate
Translate
<div data-fx="mouse-x:@scale[0;1]">Scale</div>
<div data-fx="mouse-x:@rotateZ[0;20deg]">Rotate</div>
<div data-fx="mouse-x:@translateX[0;50px]">Translate</div>

mouse-y

Change the values on y axis cursor movement by using data-fx="mouse-y:{effect}".

Scale
Rotate
Translate
<div data-fx="mouse-y:@scale[0;1]">Scale</div>
<div data-fx="mouse-y:@rotateZ[0;20deg]">Rotate</div>
<div data-fx="mouse-y:@translateY[0;50px]">Translate</div>

Options

Override a default options.

origin

The origin option defines how the percentage (and so custom value) is calculated based on cursor movement. The default value is middle.

To change the origin use data-fx="{trigger}{effect}__origin[{value}]"

Value Reference Percentage Usage Example
self element Middle: 100% mouse, mouse-x, mouse-y
self-continuos element Continue from 0% to 200% of the end value mouse-x, mouse-y
middle viewport Middle: 100% mouse, mouse-x, mouse-y
start viewport Top-left: 0%, bottom-right: 100% mouse, mouse-x, mouse-y
continuous viewport Continue from 0% to 200% of the end value mouse-x, mouse-y
parallax viewport Start on -100%, continue to 0%, end on 100% mouse-x, mouse-y