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-fx="<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-fx="mouse:<effect>".

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

mouseX

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

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

mouseY

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

<div data-tor-fx="mouseY:@transform.scale(0;1)">Scale</div>
<div data-tor-fx="mouseY:@transform.rotateZ(0deg;20deg)">Rotate</div>
<div data-tor-fx="mouseY:@transform.translateY(0px;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-tor-fx="<trigger>:<effect>__origin(<value>)"