Enhanced Bootstrap Translate

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

translateX
translateY
<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.

translateX
translateY
<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}]"

translateX
translateY
<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}]"

translateX
translateY
<div data-fx="mouse-y:@translateX[0px;20px]__origin[start]">translateX</div>
<div data-fx="mouse-y:@translateY[0px;50px]__origin[start]">translateY</div>