Enhanced Bootstrap Scale

Custom Scale PRO

Scale the element in horizontal and vertical direction based on user interaction

Overview

Scale effect will resize the element using CSS scaleX and scaleY property.

Syntax

Use data-fx="{trigger}:@{scaleX|scaleY}[{start};{end}] to scale the element over x or y axis. The {start} value represents the beginning scale value, while the {end} is the finish value.

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 scale the element when scrolling the page, use data-fx="scroll:@{scaleX|scaleY}[{amount}]".

scaleX
scaleY
<div data-fx="mouse:@scaleX[0;1]">scaleX</div>
<div data-fx="mouse:@scaleY[0;1]">scaleY</div>

mouse

To scale the element when moving the cursor over both x and y axis, use data-fx="mouse:@scaleX[{amount}]" for horizontal scale and data-fx="mouse:@scaleY[{amount}]" for vertical scale.

scaleX
scaleY
<div data-fx="mouse:@scaleX[0;1]__origin[start]">scaleX</div>
<div data-fx="mouse:@scaleY[0;1]__origin[start]">scaleY</div>

mouse-x

To scale the element when moving the cursor over x axis, use data-fx="mouse-x:@{scaleX|scaleY}[{amount}]"

scaleX
scaleY
<div data-fx="mouse-x:@scaleX[0;1]__origin[start]">scaleX</div>
<div data-fx="mouse-x:@scaleY[0;1]__origin[start]">scaleY</div>

mouse-y

To scale the element when moving the cursor over y axis, use data-fx="mouse-y:@{scaleX|scaleY}[{amount}]"

scaleX
scaleY
<div data-fx="mouse-y:@scaleX[0;1]__origin[start]">scaleX</div>
<div data-fx="mouse-y:@scaleY[0;1]__origin[start]">scaleY</div>