Custom Mouse-linked effects

Animate the CSS style while cursor is moving

Overview

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

Syntax

To create a mouse-based effect add data-tor="<mouse|mouseX|mouseY>:<effect> to your desired element.

  • mouse - change the values while mouse cursor is moving in both x and y axis
  • mouseX - change the values while mouse cursor is moving in x axis
  • mouseY - 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-tor="mouse:<effect>".

Scale
Rotate
Opacity
<div data-tor="mouse:@transform=scale(0;1)">Scale</div>
<div data-tor="mouse:@transform=rotateZ(0deg;20deg)">Rotate</div>
<div data-tor="mouse:@transform=translateY(0px;50px)">Translate</div>

mouseX

Change the values on x axis cursor movement by using data-tor="mouseX:<effect>".

Scale
Rotate
Translate
<div data-tor="mouseX:@transform=scale(0;1)">Scale</div>
<div data-tor="mouseX:@transform=rotateZ(0deg;20deg)">Rotate</div>
<div data-tor="mouseX:@transform=translateX(0px;50px)">Translate</div>

mouseY

Change the values on y axis cursor movement by using data-tor="mouseY:<effect>".

Scale
Rotate
Translate
<div data-tor="mouseY:@transform=scale(0;1)">Scale</div>
<div data-tor="mouseY:@transform=rotateZ(0deg;20deg)">Rotate</div>
<div data-tor="mouseY:@transform=translateY(0px;50px)">Translate</div>

Options

Override a default options.

method

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

To change the origin use data-tor="<trigger>:<effect>({options})"

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