Custom Background color

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-tor-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. You have to use a CSS color function such as rgb(), rgba(), hsla(), etc…

Examples

scroll

To change the background color of the element when scrolling the page, use data-tor-fx="scroll:@background-color(<amount>)".

background color
background color
<div data-tor-fx="scroll:@background-color(rgba(...13,109,253,1); rgba(...62,6,147,1))">background color</div>
<div data-tor-fx="scroll:@background-color(rgba(...13,109,253,0); rgba(...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-tor-fx="mouse:@background-color(<amount>)" for horizontal opacity and data-tor-fx="mouse:@background-color(<amount>)" for vertical opacity. These examples uses __origin(start) for more natural behavior.

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

mouseX

To change the background color of the element when moving the cursor over x axis, use data-tor-fx="mouseX:@background-color(<amount>)"

background color
background color
<div data-tor-fx="mouseX:@background-color(rgba(...13,109,253,1); rgba(...62,6,147,1))__origin(start)">background color</div>
<div data-tor-fx="mouseX:@background-color(rgba(...13,109,253,0); rgba(...13,109,253,1))__origin(start)">background color</div>

mouseY

To change the background color of the element when moving the cursor over y axis, use data-tor-fx="mouseY:@background-color(<amount>)"

background color
background color
<div data-tor-fx="mouseY:@background-color(rgba(...13,109,253,1); rgba(...62,6,147,1))__origin(start)">background color</div>
<div data-tor-fx="mouseY:@background-color(rgba(...13,109,253,0); rgba(...13,109,253,1))__origin(start)">background color</div>