Custom Motion sensor-linked effects
Create effects that react to device orientation!
Overview
By using sensorX|sensorY"
you can create sensor-linked effects that reacts to motion sensor orientation.
Syntax
To create a sensor-based effect add data-tor-fx="<sensorX|sensorY>:<effect>
to your desired element.
sensorX
- change the values while sensor cursor is moving in x axissensorY
- change the values while sensor 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.
sensorX
Change the values on x axis cursor movement by using data-tor-fx="sensorX:<effect>"
.
Scale
Rotate
Translate
<div data-tor-fx="sensorX:@transform.scale(0;1)">Scale</div>
<div data-tor-fx="sensorX:@transform.rotateZ(0deg;20deg)">Rotate</div>
<div data-tor-fx="sensorX:@transform.translateX(0px;50px)">Translate</div>
sensorY
Change the values on y axis cursor movement by using data-tor-fx="sensorY:<effect>"
.
Scale
Rotate
Translate
<div data-tor-fx="sensorY:@transform.scale(0;1)">Scale</div>
<div data-tor-fx="sensorY:@transform.rotateZ(0deg;20deg)">Rotate</div>
<div data-tor-fx="sensorY:@transform.translateY(0px;50px)">Translate</div>