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="<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="sensorX:<effect>"
.
Scale
Rotate
Translate
<div data-tor="sensorX:@transform=scale(0;1)">Scale</div>
<div data-tor="sensorX:@transform=rotateZ(0deg;20deg)">Rotate</div>
<div data-tor="sensorX:@transform=translateX(0px;50px)">Translate</div>
sensorY
Change the values on y axis cursor movement by using data-tor="sensorY:<effect>"
.
Scale
Rotate
Translate
<div data-tor="sensorY:@transform=scale(0;1)">Scale</div>
<div data-tor="sensorY:@transform=rotateZ(0deg;20deg)">Rotate</div>
<div data-tor="sensorY:@transform=translateY(0px;50px)">Translate</div>