Custom Translate PRO
Translate the element in horizontal and vertical direction based on user interaction
Overview
Translate effect will move the element using CSS translateX and translateY property.
Syntax
Use data-fx="{trigger}:@{translateX|translateY}[{start};{end}] to translate the element over x or y axis. The {start} value represents the beginning translate value, while the {end} is the finish value. You can use any supported CSS translate unit.
Examples
The {mouse} examples uses __origin[start] for more natural behavior. Try to move the cursor from the screen top-left corner into the bottom-right, the left edge to the right one, and from the top edge into the bottom.
scroll
To translate the element when scrolling the page, use data-fx="scroll:@{translateX|translateY}[{amount}]".
<div data-fx="mouse:@translateX[0px;20px]">translateX</div>
<div data-fx="mouse:@translateY[0px;50px]">translateY</div>mouse
To translate the element when moving the cursor over both x and y axis, use data-fx="mouse:@translateX[{amount}]" for horizontal translate and data-fx="mouse:@translateY[{amount}]" for vertical translate.
<div data-fx="mouse:@translateX[0px;20px]__origin[start]">translateX</div>
<div data-fx="mouse:@translateY[0px;50px]__origin[start]">translateY</div>mouse-x
To translate the element when moving the cursor over x axis, use data-fx="mouse-x:@{translateX|translateY}[{amount}]"
<div data-fx="mouse-x:@translateX[0px;20px]__origin[start]">translateX</div>
<div data-fx="mouse-x:@translateY[0px;50px]__origin[start]">translateY</div>mouse-y
To translate the element when moving the cursor over y axis, use data-fx="mouse-y:@{translateX|translateY}[{amount}]"
<div data-fx="mouse-y:@translateX[0px;20px]__origin[start]">translateX</div>
<div data-fx="mouse-y:@translateY[0px;50px]__origin[start]">translateY</div>