Animated Content

You can style your page contents with animated effects. The content will appear with some animation effect when it will come in browser view. Please check demo.
http://demo.drupar.com/paripro/animated-elements

Animation Effect

You can add any of the following animation effect to your content

  1. Slide Up
  2. Slide Down
  3. Slide From Left
  4. Slide From Right
  5. Bounce From Left
  6. Bounce From Right
  7. Bounce Up
  8. Bounce Down
  9. Fade In
  10. Zoom In

When the content will get animated

The content will appear in animated style when it will come in browser windows view.

Can I repeat the animation effect

By default the animation effect is not repeated. But if you want to repeat it, please ask on our support forum and we will help you with this.

Limitation

We have disabled animation effect for mobile and tablet devices. The animation will work only when the device's minimum width is 960px.
The is done to optimize the website for mobile and tablet devices.

How to add animation effect

Please follow below tutorial for adding a animation effect to any page element.

Slide Up

For Slide Up effect add class move-up to the element.
Please check below sample code.

<div class="move-up">
Your animated content here ...
</div>

Slide Down

For Slide Down effect add class move-down to the element.
Please check below sample code.

<div class="move-down">
Your animated content here ...
</div>

Slide From Left

For Slide From Left effect add class move-left to the element.
Please check below sample code.

<div class="move-left">
Your animated content here ...
</div>

Slide From Right

For Slide From Right effect add class move-right to the element.
Please check below sample code.

<div class="move-right">
Your animated content here ...
</div>

Bounce From Left

For Bounce From Left effect add class bounce-left to the element.
Please check below sample code.

<div class="bounce-left">
Your animated content here ...
</div>

Bounce From Right

For Bounce From Right effect add class bounce-right to the element.
Please check below sample code.

<div class="bounce-right">
Your animated content here ...
</div>

Bounce Up

For Bounce Up effect add class bounce-up to the element.
Please check below sample code.

<div class="bounce-up">
Your animated content here ...
</div>

Bounce Down

For Bounce Down effect add class bounce-down to the element.
Please check below sample code.

<div class="bounce-down">
Your animated content here ...
</div>

Fade In

For Fade In effect add class fade to the element.
Please check below sample code.

<div class="fade">
Your animated content here ...
</div>

Zoom In

For Zoom In effect add class zoom-in to the element.
Please check below sample code.

<div class="zoom-in">
Your animated content here ...
</div>