Custom Opacity

Overview

Opacity effect will change the transparency of the element using CSS opacity property.

Syntax

Use data-tor="<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 {method: 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-tor="scroll:@opacity(<amount>)".

<div data-tor="scroll:@opacity(0;1)">opacity</div>
<div data-tor="scroll:@opacity(1;0)">opacity</div>

mouse

To change the opacity of the element when moving the cursor over both x and y axis, use data-tor="mouse:@opacity(<amount>)".

<div data-tor="mouse:@opacity(0;1, {method: start})">opacity</div>
<div data-tor="mouse:@opacity(1;0, {method: start})">opacity</div>

mouseX

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

<div data-tor="mouseX:@opacity(0;1, {method: start})">opacity</div>
<div data-tor="mouseX:@opacity(1;0, {method: start})">opacity</div>

mouseY

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

<div data-tor="mouseY:@opacity(0;1, {method: start})">opacity</div>
<div data-tor="mouseY:@opacity(1;0, {method: start})">opacity</div>