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}]"
.
<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.
<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}]"
<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}]"
<div data-fx="mouse-y:@scaleX[0;1]__origin[start]">scaleX</div>
<div data-fx="mouse-y:@scaleY[0;1]__origin[start]">scaleY</div>