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 axismouse-x
- change the values while mouse cursor is moving in x axismouse-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}"
.
<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}"
.
<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}"
.
<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 |