Enhanced Bootstrap Background color

Custom Background color PRO

Background color the element in horizontal and vertical direction based on user interaction

Overview

Background color effect will change the transparency of the element using CSS background-color property.

Syntax

Use data-fx="{trigger}:@background-color[...{start};...{end}] to change the opacity the element on given {trigger}. The {start} value represents the beginning background color value, while the {end} is the finish value. Colors need to be defined as CSS rgba()

Examples

The {mouse} examples uses __origin[start] for more natural behavior.

scroll

To change the background color of the element when scrolling the page, use data-fx="scroll:@background-color[{amount}]".

background color
background color
<div data-fx="scroll:@background-color[...13,109,253,1;...62,6,147,1]">background color</div>
<div data-fx="scroll:@background-color[...13,109,253,0;...13,109,253,1]">background color</div>

mouse

To change the background color of the element when moving the cursor over both x and y axis, use data-fx="mouse:@background-color[{amount}]" for horizontal opacity and data-fx="mouse:@background-color[{amount}]" for vertical opacity.

background color
background color
<div data-fx="mouse:@background-color[...13,109,253,1;...62,6,147,1]__origin[start]">background color</div>
<div data-fx="mouse:@background-color[...13,109,253,0;...13,109,253,1]__origin[start]">background color</div>

mouse-x

To change the background color of the element when moving the cursor over x axis, use data-fx="mouse-x:@background-color[{amount}]"

background color
background color
<div data-fx="mouse-x:@background-color[...13,109,253,1;...62,6,147,1]__origin[start]">background color</div>
<div data-fx="mouse-x:@background-color[...13,109,253,0;...13,109,253,1]__origin[start]">background color</div>

mouse-y

To change the background color of the element when moving the cursor over y axis, use data-fx="mouse-y:@background-color[{amount}]"

background color
background color
<div data-fx="mouse-y:@background-color[...13,109,253,1;...62,6,147,1]__origin[start]">background color</div>
<div data-fx="mouse-y:@background-color[...13,109,253,0;...13,109,253,1]__origin[start]">background color</div>