Pro

Fade

Smoothly fade in or fade out any element

Overview

Use fade-in or fade-out values in data-fx data attribute to smoothly change the opacity of element. Default opacity distance is 1, means that element changes the opacity from 0% to 100% for fade-in and from 100% to 0% for fade-out. Read more in Distance section.

How to use

Use data-fx="{action}:fade{direction}" data attribute to change the opacity of element.

Where {action} is one of:

  • h: to animate an element when it’s hovered
  • a: to animate an element when it gets .active class
  • th: to animate an element when the parent trigger is hovered
  • ta: to animate an element when the parent trigger gets .active or .show class

… and {direction} is one of:

  • -in to change the opacity of an element from 0% to 100%
  • -out to change the opacity of an element from 100% to 0%

On hover

To change the opacity of element on its hover, add data-fx="h:fade-{direction}" data attribute.

h:fade-in
h:fade-out
<div data-fx="h:fade-in">h:fade-in</div>
<div data-fx="h:fade-out">h:fade-out</div>

On active

To change the opacity of element when it gets .active class, add data-fx="a:fade-{direction}" data attribute.

Click the elements to toggle its .active class
a:fade-in
a:fade-out
<div data-fx="a:fade-in">a:fade-in</div>
<div data-fx="a:fade-out">a:fade-out</div>

On trigger hover

Change the opacity of a single or multiple elements when the parent trigger is hovered. At first, indicate what is parent trigger element by adding data-trigger="hover" attribute to it, then add data-fx="th:fade-{direction}" data attribute to the elements you want to change its opacity when trigger is hovered.

Hover this trigger
th:fade-in
th:fade-out
<div data-trigger="hover">
  <div data-fx="th:fade-in">th:fade-in</div>
  <div data-fx="th:fade-out">th:fade-out</div>
</div>

On trigger active

Fade a single or multiple elements when the parent trigger gets .active or .show class. At first, indicate what is parent trigger element by adding data-trigger="{active|show}" attribute to it, then add data-fx="ta:fade-{direction}" data attribute to elements you want to fade when trigger is hovered.

Click this trigger to toggle its .active class
ta:fade-in
ta:fade-out
<div data-trigger="active">
  <div data-fx="ta:fade-in">ta:fade-in</div>
  <div data-fx="ta:fade-out">ta:fade-out</div>
</div>

Distance

You can change the default 1 opacity distance by adding fade-short value to data-fx attribute where:

  • fade-out fade-short will fade the element from 100% to 80%
  • fade-in fade-short will fade the element from 80% to 100%

It can be combined it with any {action} in data-fx="{action}:fade-*" attribute.

Fade in

h:fade-in
h:fade-in fade-short
<div data-fx="h:fade-in">h:fade-in</div>
<div data-fx="h:fade-in fade-short">h:fade-in fade-short</div>

Fade out

h:fade-out
h:fade-out fade-short
<div data-fx="h:fade-out">h:fade-out</div>
<div data-fx="h:fade-out fade-short">h:fade-out fade-short</div>