Custom Opacity PRO
Opacity the element in horizontal and vertical direction based on user interaction
Overview
Opacity effect will change the transparency of the element using CSS opacity property.
Syntax
Use data-fx="{trigger}:@opacity[{start};{end}] to change the opacity the element on given {trigger}. The {start} value represents the beginning opacity 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 change the opacity of the element when scrolling the page, use data-fx="scroll:@opacity[{amount}]".
<div data-fx="mouse:@opacity[0;1]__origin[start]">opacity</div>
<div data-fx="mouse:@opacity[1;0]__origin[start]">opacity</div>mouse
To change the opacity of the element when moving the cursor over both x and y axis, use data-fx="mouse:@opacity[{amount}]" for horizontal opacity and data-fx="mouse:@opacity[{amount}]" for vertical opacity.
<div data-fx="mouse:@opacity[0;1]__origin[start]">opacity</div>
<div data-fx="mouse:@opacity[1;0]__origin[start]">opacity</div>mouse-x
To change the opacity of the element when moving the cursor over x axis, use data-fx="mouse-x:@opacity[{amount}]"
<div data-fx="mouse-x:@opacity[0;1]__origin[start]">opacity</div>
<div data-fx="mouse-x:@opacity[1;0]__origin[start]">opacity</div>mouse-y
To change the opacity of the element when moving the cursor over y axis, use data-fx="mouse-y:@opacity[{amount}]"
<div data-fx="mouse-y:@opacity[0;1]__origin[start]">opacity</div>
<div data-fx="mouse-y:@opacity[1;0]__origin[start]">opacity</div>