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 axis
• sensorY - 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>".

<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>".

<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>