Enhanced Bootstrap Opacity

Built in Opacity PRO

Animate the element’s opacity change

Overview

Change the element opacity using {trigger}:opacity--{value}. This is similar to Fade effect, but the opacity--* works together with the .opacity-* class.
That means you can set the initial opacity using .opacity-* class and change it when the trigger has performed.

Triggers

To animate the opacity when {trigger} is performed on a single element, use data-fx="{trigger}:opacity--{value} where {trigger} is:

  • inview: - when element appears in the viewport and gets .inview class
  • active: - when element gets .active class
  • show: - when element gets .show class
  • hover: - when element gets hover state

And {value} is one of 0, 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100

Hover over the elements:

Opacity 0
Opacity 5
Opacity 10
Opacity 20
Opacity 30
Opacity 40
Opacity 50
Opacity 60
Opacity 70
Opacity 80
Opacity 90
Opacity 100
          













<div data-fx="hover:opacity--0">Opacity 0</div>
<div data-fx="hover:opacity--5">Opacity 5</div>
<div data-fx="hover:opacity--10">Opacity 10</div>
<div data-fx="hover:opacity--20">Opacity 20</div>
<div data-fx="hover:opacity--30">Opacity 30</div>
<div data-fx="hover:opacity--40">Opacity 40</div>
<div data-fx="hover:opacity--50">Opacity 50</div>
<div data-fx="hover:opacity--60">Opacity 60</div>
<div data-fx="hover:opacity--70">Opacity 70</div>
<div data-fx="hover:opacity--80">Opacity 80</div>
<div data-fx="hover:opacity--90">Opacity 90</div>
<div data-fx="hover:opacity--100">Opacity 100</div>
          

Click the elements to toggle .active class

Opacity 0
Opacity 5
Opacity 10
Opacity 20
Opacity 30
Opacity 40
Opacity 50
Opacity 60
Opacity 70
Opacity 80
Opacity 90
Opacity 100
          













<div data-fx="active:opacity--0">Opacity 0</div>
<div data-fx="active:opacity--5">Opacity 5</div>
<div data-fx="active:opacity--10">Opacity 10</div>
<div data-fx="active:opacity--20">Opacity 20</div>
<div data-fx="active:opacity--30">Opacity 30</div>
<div data-fx="active:opacity--40">Opacity 40</div>
<div data-fx="active:opacity--50">Opacity 50</div>
<div data-fx="active:opacity--60">Opacity 60</div>
<div data-fx="active:opacity--70">Opacity 70</div>
<div data-fx="active:opacity--80">Opacity 80</div>
<div data-fx="active:opacity--90">Opacity 90</div>
<div data-fx="active:opacity--100">Opacity 100</div>
          

Scroll into view to toggle .inview class

Opacity 0
Opacity 5
Opacity 10
Opacity 20
Opacity 30
Opacity 40
Opacity 50
Opacity 60
Opacity 70
Opacity 80
Opacity 90
Opacity 100
          













<div data-fx="inview:opacity--0">Opacity 0</div>
<div data-fx="inview:opacity--5">Opacity 5</div>
<div data-fx="inview:opacity--10">Opacity 10</div>
<div data-fx="inview:opacity--20">Opacity 20</div>
<div data-fx="inview:opacity--30">Opacity 30</div>
<div data-fx="inview:opacity--40">Opacity 40</div>
<div data-fx="inview:opacity--50">Opacity 50</div>
<div data-fx="inview:opacity--60">Opacity 60</div>
<div data-fx="inview:opacity--70">Opacity 70</div>
<div data-fx="inview:opacity--80">Opacity 80</div>
<div data-fx="inview:opacity--90">Opacity 90</div>
<div data-fx="inview:opacity--100">Opacity 100</div>
          

Parent triggers

To animate the opacity of a single or multiple child elements when {trigger} is performed on a parent element,
add data-fx-trigger="{inview|active|show|hover} to indicate that this is a parent element with the desired trigger - if this parent trigger is performed,
child elements will change.

Than add data-fx="{TRIGGER}:opacity--{value} attribute to child elements where {TRIGGER} is:

  • inview/T: - when .inview class is applied on parent Trigger element, because it’s visible in the viewport
  • active/T: - when .active class is applied on parent Trigger element
  • show/T: - when .show class is applied on parent Trigger element
  • hover/T: - when hover state is applied on parent Trigger element

And {value} is one of 0, 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100

Hover over the wrapper:

Opacity 0
Opacity 5
Opacity 10
Opacity 20
Opacity 30
Opacity 40
Opacity 50
Opacity 60
Opacity 70
Opacity 80
Opacity 90
Opacity 100
          













<div data-fx-trigger="hover">
  <div data-fx="hover/T:opacity--0">Opacity 0</div>
  <div data-fx="hover/T:opacity--5">Opacity 5</div>
  <div data-fx="hover/T:opacity--10">Opacity 10</div>
  <div data-fx="hover/T:opacity--20">Opacity 20</div>
  <div data-fx="hover/T:opacity--30">Opacity 30</div>
  <div data-fx="hover/T:opacity--40">Opacity 40</div>
  <div data-fx="hover/T:opacity--50">Opacity 50</div>
  <div data-fx="hover/T:opacity--60">Opacity 60</div>
  <div data-fx="hover/T:opacity--70">Opacity 70</div>
  <div data-fx="hover/T:opacity--80">Opacity 80</div>
  <div data-fx="hover/T:opacity--90">Opacity 90</div>
  <div data-fx="hover/T:opacity--100">Opacity 100</div>
</div>
      
          

Click the wrapper to toggle .active class:

Opacity 0
Opacity 5
Opacity 10
Opacity 20
Opacity 30
Opacity 40
Opacity 50
Opacity 60
Opacity 70
Opacity 80
Opacity 90
Opacity 100
          













<div data-fx-trigger="active">
  <div data-fx="active/T:opacity--0">Opacity 0</div>
  <div data-fx="active/T:opacity--5">Opacity 5</div>
  <div data-fx="active/T:opacity--10">Opacity 10</div>
  <div data-fx="active/T:opacity--20">Opacity 20</div>
  <div data-fx="active/T:opacity--30">Opacity 30</div>
  <div data-fx="active/T:opacity--40">Opacity 40</div>
  <div data-fx="active/T:opacity--50">Opacity 50</div>
  <div data-fx="active/T:opacity--60">Opacity 60</div>
  <div data-fx="active/T:opacity--70">Opacity 70</div>
  <div data-fx="active/T:opacity--80">Opacity 80</div>
  <div data-fx="active/T:opacity--90">Opacity 90</div>
  <div data-fx="active/T:opacity--100">Opacity 100</div>
</div>
      
          

Scroll into view to toggle .inview class on parent

Opacity 0
Opacity 5
Opacity 10
Opacity 20
Opacity 30
Opacity 40
Opacity 50
Opacity 60
Opacity 70
Opacity 80
Opacity 90
Opacity 100
          













<div data-fx-trigger="inview">
  <div data-fx="inview/T:opacity--0">Opacity 0</div>
  <div data-fx="inview/T:opacity--5">Opacity 5</div>
  <div data-fx="inview/T:opacity--10">Opacity 10</div>
  <div data-fx="inview/T:opacity--20">Opacity 20</div>
  <div data-fx="inview/T:opacity--30">Opacity 30</div>
  <div data-fx="inview/T:opacity--40">Opacity 40</div>
  <div data-fx="inview/T:opacity--50">Opacity 50</div>
  <div data-fx="inview/T:opacity--60">Opacity 60</div>
  <div data-fx="inview/T:opacity--70">Opacity 70</div>
  <div data-fx="inview/T:opacity--80">Opacity 80</div>
  <div data-fx="inview/T:opacity--90">Opacity 90</div>
  <div data-fx="inview/T:opacity--100">Opacity 100</div>
</div>