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})"

ValueReferencePercentageUsageExample
selfelementMiddle: 100%mouse, mouseX, mouseY
self-continuoselementContinue from 0% to 200% of the end valuemouseX, mouseY
middleviewportMiddle: 100%mouse, mouseX, mouseY
startviewportTop-left: 0%, bottom-right: 100%mouse, mouseX, mouseY
continuousviewportContinue from 0% to 200% of the end valuemouseX, mouseY
parallaxviewportStart on -100%, continue to 0%, end on 100%mouseX, mouseY