Overview
Change the background color of element when these triggers has been performed: User performs hover over element, element gets .active
or .show
class, or element appears in the viewport and gets .inview` class. You can also easily change the text color opacity by changing
its alpha channel
Triggers
To animate the text color when {trigger}
is performed on a single element, use data-fx="{trigger}:text-color--{color}
where {trigger}
is:
inview:
- when element appears in the viewport and gets.inview
classactive:
- when element gets.active
classshow:
- when element gets.show
classhover:
- when element getshover
state
And {color}
is one of the theme colors.
Hover over the elements:
<div data-fx="hover:text-color--primary">Text color primary</div>
<div data-fx="hover:text-color--secondary">Text color secondary</div>
<div data-fx="hover:text-color--success">Text color success</div>
<div data-fx="hover:text-color--danger">Text color danger</div>
<div data-fx="hover:text-color--warning">Text color warning</div>
<div data-fx="hover:text-color--info">Text color info</div>
<div data-fx="hover:text-color--light">Text color light</div>
<div data-fx="hover:text-color--dark">Text color dark</div>
<div data-fx="hover:text-color--white">Text color white</div>
<div data-fx="hover:text-color--transparent">Text color transparent</div>
Click the elements to toggle .active
class
<div data-fx="active:text-color--primary">Text color primary</div>
<div data-fx="active:text-color--secondary">Text color secondary</div>
<div data-fx="active:text-color--success">Text color success</div>
<div data-fx="active:text-color--danger">Text color danger</div>
<div data-fx="active:text-color--warning">Text color warning</div>
<div data-fx="active:text-color--info">Text color info</div>
<div data-fx="active:text-color--light">Text color light</div>
<div data-fx="active:text-color--dark">Text color dark</div>
<div data-fx="active:text-color--white">Text color white</div>
<div data-fx="active:text-color--transparent">Text color transparent</div>
Scroll into view to toggle .inview
class
<div data-fx="inview:text-color--primary">Text color primary</div>
<div data-fx="inview:text-color--secondary">Text color secondary</div>
<div data-fx="inview:text-color--success">Text color success</div>
<div data-fx="inview:text-color--danger">Text color danger</div>
<div data-fx="inview:text-color--warning">Text color warning</div>
<div data-fx="inview:text-color--info">Text color info</div>
<div data-fx="inview:text-color--light">Text color light</div>
<div data-fx="inview:text-color--dark">Text color dark</div>
<div data-fx="inview:text-color--white">Text color white</div>
<div data-fx="inview:text-color--transparent">Text color transparent</div>
Parent triggers
To animate the background color 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}:border-color--{color}
attribute to child elements where {TRIGGER}
is:
inview/T:
- when.inview
class is applied on parent Trigger element, because it’s visible in the viewportactive/T:
- when.active
class is applied on parent Trigger elementshow/T:
- when.show
class is applied on parent Trigger elementhover/T:
- whenhover
state is applied on parent Trigger element
And {color}
is one of the theme colors.
Hover over the wrapper:
<div data-fx-trigger="hover">
<div data-fx="hover/T:text-color--primary">Text color primary</div>
<div data-fx="hover/T:text-color--secondary">Text color secondary</div>
<div data-fx="hover/T:text-color--success">Text color success</div>
<div data-fx="hover/T:text-color--danger">Text color danger</div>
<div data-fx="hover/T:text-color--warning">Text color warning</div>
<div data-fx="hover/T:text-color--info">Text color info</div>
<div data-fx="hover/T:text-color--light">Text color light</div>
<div data-fx="hover/T:text-color--dark">Text color dark</div>
<div data-fx="hover/T:text-color--white">Text color white</div>
<div data-fx="hover/T:text-color--transparent">Text color transparent</div>
</div>
Click the wrapper to toggle .active
class:
<div data-fx-trigger="active">
<div data-fx="active/T:text-color--primary">Text color primary</div>
<div data-fx="active/T:text-color--secondary">Text color secondary</div>
<div data-fx="active/T:text-color--success">Text color success</div>
<div data-fx="active/T:text-color--danger">Text color danger</div>
<div data-fx="active/T:text-color--warning">Text color warning</div>
<div data-fx="active/T:text-color--info">Text color info</div>
<div data-fx="active/T:text-color--light">Text color light</div>
<div data-fx="active/T:text-color--dark">Text color dark</div>
<div data-fx="active/T:text-color--white">Text color white</div>
<div data-fx="active/T:text-color--transparent">Text color transparent</div>
</div>
Scroll into view to toggle .inview
class on parent
<div data-fx-trigger="inview">
<div data-fx="inview/T:text-color--primary">Text color primary</div>
<div data-fx="inview/T:text-color--secondary">Text color secondary</div>
<div data-fx="inview/T:text-color--success">Text color success</div>
<div data-fx="inview/T:text-color--danger">Text color danger</div>
<div data-fx="inview/T:text-color--warning">Text color warning</div>
<div data-fx="inview/T:text-color--info">Text color info</div>
<div data-fx="inview/T:text-color--light">Text color light</div>
<div data-fx="inview/T:text-color--dark">Text color dark</div>
<div data-fx="inview/T:text-color--white">Text color white</div>
<div data-fx="inview/T:text-color--transparent">Text color transparent</div>
</div>
Customizations
Text opacity
Change the text color opacity, using data-fx="{trigger}:text-alpha--{amount}"
. This will change the alpha channel of the
text color using CSS hsla()
function.
Triggers
Use data-fx="{inview:|active:|show:|hover:}text-alpha--{amount}"
to change the text opacity of a single element.
Hover over the elements:
<div class="text-dark" data-fx="hover:text-alpha--0">Text alpha 0</div>
<div class="text-dark" data-fx="hover:text-alpha--5">Text alpha 5</div>
<div class="text-dark" data-fx="hover:text-alpha--10">Text alpha 10</div>
<div class="text-dark" data-fx="hover:text-alpha--20">Text alpha 20</div>
<div class="text-dark" data-fx="hover:text-alpha--30">Text alpha 30</div>
<div class="text-dark" data-fx="hover:text-alpha--40">Text alpha 40</div>
<div class="text-dark" data-fx="hover:text-alpha--50">Text alpha 50</div>
<div class="text-dark" data-fx="hover:text-alpha--60">Text alpha 60</div>
<div class="text-dark" data-fx="hover:text-alpha--70">Text alpha 70</div>
<div class="text-dark" data-fx="hover:text-alpha--80">Text alpha 80</div>
<div class="text-dark" data-fx="hover:text-alpha--90">Text alpha 90</div>
<div class="text-dark" data-fx="hover:text-alpha--100">Text alpha 100</div>
Click the elements to toggle .active
class
<div class="text-dark" data-fx="active:text-alpha--0">Text alpha 0</div>
<div class="text-dark" data-fx="active:text-alpha--5">Text alpha 5</div>
<div class="text-dark" data-fx="active:text-alpha--10">Text alpha 10</div>
<div class="text-dark" data-fx="active:text-alpha--20">Text alpha 20</div>
<div class="text-dark" data-fx="active:text-alpha--30">Text alpha 30</div>
<div class="text-dark" data-fx="active:text-alpha--40">Text alpha 40</div>
<div class="text-dark" data-fx="active:text-alpha--50">Text alpha 50</div>
<div class="text-dark" data-fx="active:text-alpha--60">Text alpha 60</div>
<div class="text-dark" data-fx="active:text-alpha--70">Text alpha 70</div>
<div class="text-dark" data-fx="active:text-alpha--80">Text alpha 80</div>
<div class="text-dark" data-fx="active:text-alpha--90">Text alpha 90</div>
<div class="text-dark" data-fx="active:text-alpha--100">Text alpha 100</div>
Scroll into view to toggle .inview
class
<div class="text-dark" data-fx="inview:text-alpha--0">Text alpha 0</div>
<div class="text-dark" data-fx="inview:text-alpha--5">Text alpha 5</div>
<div class="text-dark" data-fx="inview:text-alpha--10">Text alpha 10</div>
<div class="text-dark" data-fx="inview:text-alpha--20">Text alpha 20</div>
<div class="text-dark" data-fx="inview:text-alpha--30">Text alpha 30</div>
<div class="text-dark" data-fx="inview:text-alpha--40">Text alpha 40</div>
<div class="text-dark" data-fx="inview:text-alpha--50">Text alpha 50</div>
<div class="text-dark" data-fx="inview:text-alpha--60">Text alpha 60</div>
<div class="text-dark" data-fx="inview:text-alpha--70">Text alpha 70</div>
<div class="text-dark" data-fx="inview:text-alpha--80">Text alpha 80</div>
<div class="text-dark" data-fx="inview:text-alpha--90">Text alpha 90</div>
<div class="text-dark" data-fx="inview:text-alpha--100">Text alpha 100</div>
Parent triggers
Use data-fx="{inview/T|active/T|show/T|hover/T}text-alpha--{amount}"
to change the text opacity of an element (elements) when a certain triggers has been performed on a parent element.
Hover over the wrapper:
<div data-fx-trigger="hover">
<div class="text-dark" data-fx="hover/T:text-alpha--0">Text alpha 0</div>
<div class="text-dark" data-fx="hover/T:text-alpha--5">Text alpha 5</div>
<div class="text-dark" data-fx="hover/T:text-alpha--10">Text alpha 10</div>
<div class="text-dark" data-fx="hover/T:text-alpha--20">Text alpha 20</div>
<div class="text-dark" data-fx="hover/T:text-alpha--30">Text alpha 30</div>
<div class="text-dark" data-fx="hover/T:text-alpha--40">Text alpha 40</div>
<div class="text-dark" data-fx="hover/T:text-alpha--50">Text alpha 50</div>
<div class="text-dark" data-fx="hover/T:text-alpha--60">Text alpha 60</div>
<div class="text-dark" data-fx="hover/T:text-alpha--70">Text alpha 70</div>
<div class="text-dark" data-fx="hover/T:text-alpha--80">Text alpha 80</div>
<div class="text-dark" data-fx="hover/T:text-alpha--90">Text alpha 90</div>
<div class="text-dark" data-fx="hover/T:text-alpha--100">Text alpha 100</div>
</div>
Click the wrapper to toggle .active
class:
<div data-fx-trigger="active">
<div class="text-dark" data-fx="active/T:text-alpha--0">Text alpha 0</div>
<div class="text-dark" data-fx="active/T:text-alpha--5">Text alpha 5</div>
<div class="text-dark" data-fx="active/T:text-alpha--10">Text alpha 10</div>
<div class="text-dark" data-fx="active/T:text-alpha--20">Text alpha 20</div>
<div class="text-dark" data-fx="active/T:text-alpha--30">Text alpha 30</div>
<div class="text-dark" data-fx="active/T:text-alpha--40">Text alpha 40</div>
<div class="text-dark" data-fx="active/T:text-alpha--50">Text alpha 50</div>
<div class="text-dark" data-fx="active/T:text-alpha--60">Text alpha 60</div>
<div class="text-dark" data-fx="active/T:text-alpha--70">Text alpha 70</div>
<div class="text-dark" data-fx="active/T:text-alpha--80">Text alpha 80</div>
<div class="text-dark" data-fx="active/T:text-alpha--90">Text alpha 90</div>
<div class="text-dark" data-fx="active/T:text-alpha--100">Text alpha 100</div>
</div>
Scroll into view to toggle .inview
class on parent
<div data-fx-trigger="inview">
<div class="text-dark" data-fx="inview/T:text-alpha--0">Text alpha 0</div>
<div class="text-dark" data-fx="inview/T:text-alpha--5">Text alpha 5</div>
<div class="text-dark" data-fx="inview/T:text-alpha--10">Text alpha 10</div>
<div class="text-dark" data-fx="inview/T:text-alpha--20">Text alpha 20</div>
<div class="text-dark" data-fx="inview/T:text-alpha--30">Text alpha 30</div>
<div class="text-dark" data-fx="inview/T:text-alpha--40">Text alpha 40</div>
<div class="text-dark" data-fx="inview/T:text-alpha--50">Text alpha 50</div>
<div class="text-dark" data-fx="inview/T:text-alpha--60">Text alpha 60</div>
<div class="text-dark" data-fx="inview/T:text-alpha--70">Text alpha 70</div>
<div class="text-dark" data-fx="inview/T:text-alpha--80">Text alpha 80</div>
<div class="text-dark" data-fx="inview/T:text-alpha--90">Text alpha 90</div>
<div class="text-dark" data-fx="inview/T:text-alpha--100">Text alpha 100</div>
</div>
On this page