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-fx="<mouse|mouseX|mouseY>:<effect>
to your desired element.
mouse
- change the values while mouse cursor is moving in both x and y axismouseX
- change the values while mouse cursor is moving in x axismouseY
- 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>)"
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 |