Enhanced Bootstrap Opacity

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

opacity
opacity
<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.

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

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

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