Animated Box

Animated box


Create Your Website

With Novi Builder powerful multipurpose template


Create Your Website

Buy this template

Create Your Website

With Novi Builder powerful multipurpose template


Create Your Website

Buy this template

The basic widget HTML markup to display one element looks the following way:

<div class="animated-box-wrap">
  <div class="animated-box">
    <div class="animated-box-front">
      <div class="animated-box-inner">
        ...
      </div>
    </div>
    <div class="animated-box-back">
      <div class="animated-box-inner">
        ...
      </div>
    </div>
  </div>
</div>

Animated box skyscraper


Create Your Website

With Novi Builder powerful multipurpose template


Create Your Website

Buy this template

Create Your Website

With Novi Builder powerful multipurpose template


Create Your Website

Our mission at Novi Builder is to provide advanced and innovative web design and web development of the highest quality for all of our clients.

Read more

Create Your Website

With Novi Builder powerful multipurpose template


Create Your Website

Our mission at Novi Builder is to provide advanced and innovative web design and web development of the highest quality for all of our clients.


To display element that looks the following way add to the wrap class .animated-box-skyscraper. To change the direction of flip use classes .animated-box-skyscraper-right, .animated-box-skyscraper-left, .animated-box-skyscraper-center

<div class="animated-box-wrap animated-box-skyscraper">
  ...
</div>

Animated box transparent


Create Your Website

With Novi Builder powerful multipurpose template


Create Your Website

Buy this template

Create Your Website

With Novi Builder powerful multipurpose template


Create Your Website

Buy this template

To display element that looks the following way add to the wrap class .animated-box-transparent.

<div class="animated-box-wrap animated-box-transparent">
  ...
</div>

Animated box with order

Create Your Website


Create Your Website

With Novi Builder powerful multipurpose template

Buy this template

Create Your Website


Create Your Website

With Novi Builder powerful multipurpose template

Buy this template

Create Your Website


Create Your Website

With Novi Builder powerful multipurpose template

Buy this template

Create Your Website


Create Your Website

With Novi Builder powerful multipurpose template

Buy this template

To display element that looks the following way wrap all elements in a div with class .animated-box-ordered, and add to the wrapper element class .animated-box-ordered-item. To flip elements horizontal use class .animated-box-wrap-vertical.

<div class="animated-box-wrap animated-box-transparent">
  ...
</div>

Animated box product horizontal flip

Animated box product vertical flip