Pro

Block

Reveal hidden content with stylish block effect in four directions

Overview

Use block-{direction} values in data-fx data attribute to reveal the hidden elements that are wrapped in element with .wrap class with stylish block effect. Elements are hidden at the beginning and visible during the block revealing animation on {action}.

How to use

Use data-fx="{action}:block-{direction}" data attribute to reveal a hidden element with block effect. Wrap all content into .wrap 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:

  • -up to reveal an element using block animation from bottom up
  • -down to reveal an element using block animation from top down
  • -left to reveal an element using block animation from right to left
  • -right to reveal an element using block animation from left to right

Structure of block-{direction}:

<div data-fx="{action}:block-{direction}">
  <div class="wrap">
    Content...
  </div>
</div>


Do not use any data-fx attribute on .wrap element! This will cause unpredicted behavior.

On hover

To reveal a hidden content with block effect on its hover, add data-fx="h:block-{direction}" data attribute.

h:block-up
h:block-down
h:block-left
h:block-right
<div data-fx="h:block-up">
  <div class="wrap">h:block-up</div>
</div>
<div data-fx="h:block-down">
  <div class="wrap">h:block-down</div>
</div>
<div data-fx="h:block-left">
  <div class="wrap">h:block-left</div>
</div>
<div data-fx="h:block-right">
  <div class="wrap">h:block-right</div>
</div>

On active

To reveal a single element with block effect when it gets .active class, add data-fx="a:block-{direction}" data attribute.

Click the elements to toggle its .active class
a:block-up
a:block-down
a:block-left
a:block-right
<div data-fx="a:block-up">
  <div class="wrap">a:block-up</div>
</div>
<div data-fx="a:block-down">
  <div class="wrap">a:block-down</div>
</div>
<div data-fx="a:block-left">
  <div class="wrap">a:block-left</div>
</div>
<div data-fx="a:block-right">
  <div class="wrap">a:block-right</div>
</div>

On trigger hover

Reveal 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:block-{direction}" data attribute to the elements you want to reveal when trigger is hovered.

Hover this trigger
th:block-up
th:block-down
th:block-left
th:block-right
<div data-trigger="hover">
  <div data-fx="th:block-up">
    <div class="wrap">th:block-up</div>
  </div>
  <div data-fx="th:block-down">
    <div class="wrap">th:block-down</div>
  </div>
  <div data-fx="th:block-left">
    <div class="wrap">th:block-left</div>
  </div>
  <div data-fx="th:block-right">
    <div class="wrap">th:block-right</div>
  </div>
</div>

On trigger active

Reveal 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:block-{direction}" data attribute to the elements you want to reveal when trigger is hovered.

Click this trigger to toggle its .active class
ta:block-up
ta:block-down
ta:block-left
ta:block-right
<div data-trigger="active">
  <div data-fx="ta:block-up">
    <div class="wrap">ta:block-up</div>
  </div>
  <div data-fx="ta:block-down">
    <div class="wrap">ta:block-down</div>
  </div>
  <div data-fx="ta:block-left">
    <div class="wrap">ta:block-left</div>
  </div>
  <div data-fx="ta:block-right">
    <div class="wrap">ta:block-right</div>
  </div>
</div>

Styling

Block doesn’t need to be black and squared only. You can set a block color and block skew using block-{color} and skew values in data-fx attribute.

Block color

There are two methods of changing the block color:

  • Basic - use one of block-{primary|secondary|white} CSS background colors
  • Custom - use any block color you need. This requires JavaScript

Basic

Add block-{primary|secondary|white} block color modifier along with {action}:block-{direction} into data-fx attribute to change the block color. The default block color is black, there is no need for black color modifier.

default block color
block-primary
block-secondary
block-white
<div data-fx="h:block-up">
  <div class="wrap">default block color</div>
</div>
<div data-fx="h:block-down block-primary">
  <div class="wrap">block-primary</div>
</div>
<div data-fx="h:block-left block-secondary">
  <div class="wrap">block-secondary</div>
</div>
<div data-fx="h:block-right block-white">
  <div class="wrap">block-white</div>
</div>

Custom

Add block[{color}] into data-fx attribute. {color} is any color in CSS-readable format without spaces!

block[#0000ff]
block[rgb(200,0,255)]
block[orange]
<div data-fx="h:block-down block[#0000ff]">
  <div class="wrap">block[#0000ff]</div>
</div>
<div data-fx="h:block-left block[rgb(200,0,255)]">
  <div class="wrap">block[rgb(200,0,255)]</div>
</div>
<div data-fx="h:block-right block[orange]">
  <div class="wrap">block[orange]</div>
</div>

Skew

Add stylish skewed effect to block element by adding skew into data-fx.

h:block-up
h:block-down
h:block-left
h:block-right
<div data-fx="h:block-up skew">
  <div class="wrap">h:block-up</div>
</div>
<div data-fx="h:block-down skew">
  <div class="wrap">h:block-down</div>
</div>
<div data-fx="h:block-left skew">
  <div class="wrap">h:block-left</div>
</div>
<div data-fx="h:block-right skew">
  <div class="wrap">h:block-right</div>
</div>

Advanced Block animations

Combinations

You can create interesting effects by combining multiple nested animation styles. Put the data-trigger="{action}" into parent data-fx to indicate that this is a parent trigger and add .anim-child class into any nested data-fx that are dependent on a parent trigger. Note that you can include nested block-* animation to create a new animation combinations.

Note that not every nested animation combination can bring the right aesthetic look. You need to find the right balance between them.

<div class="row">

  <div class="col-md-4">
    <div class="bg-light" data-fx="h:block-right skew" data-trigger="hover">
      <div class="wrap">
        <div class="anim-child" data-fx="th:pull-right pull-half">
          <img class="full" src="/assets/img/img-card-01.jpg">
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="bg-light" data-fx="h:block-right skew" data-trigger="hover">
      <div class="wrap">
        <div class="anim-child" data-fx="th:shrink-in shrink-short">
          <img class="full" src="/assets/img/img-card-01.jpg">
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="bg-light" data-fx="h:block-right skew" data-trigger="hover">
      <div class="wrap">
        <div class="anim-child" data-fx="th:block-left th:shrink-in skew">
          <div class="wrap">
            <img class="full" src="/assets/img/img-card-01.jpg">
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

Delay

It is possible to use Delay by adding delay[{milliseconds}] to data-fx. But if you have nested animations that are dependent on parent data-trigger, add .anim-child class to nested data-fx element.

Click this trigger to toggle its .active class
<div data-trigger="active">
  <div data-fx="ta:block-right skew">
    <div class="wrap">
      <div class="anim-child" data-fx="ta:pull-right pull-half">
        <img class="full" src="/assets/img/img-card-01.jpg">
      </div>
    </div>
  </div>
  <div data-fx="ta:block-right skew delay[100ms]">
    <div class="wrap">
      <div class="anim-child" data-fx="ta:pull-right pull-half">
        <img class="full" src="/assets/img/img-card-01.jpg">
      </div>
    </div>
  </div>
  <div data-fx="ta:block-right skew delay[200ms]">
    <div class="wrap">
      <div class="anim-child" data-fx="ta:pull-right pull-half">
        <img class="full" src="/assets/img/img-card-01.jpg">
      </div>
    </div>
  </div>
</div>