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
- Slide Up
- Slide Down
- Slide From Left
- Slide From Right
- Bounce From Left
- Bounce From Right
- Bounce Up
- Bounce Down
- Fade In
- 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>