EasyLoader is a cool Javascript library that will make all your pages unforgettable for your visitors. With EasyLoader you can build a chain of different animated effects just after the page is loaded. You can make stickers, the Info-Panel, closable elements. Easyloader will help you animate elements having either absolute or relative positioning with the same ease.
Examples:
Features
- Is applicable to elements with relative, absolute, fixed or static positioning
- Builds a chain of different animated effects
- Uses either javascript animation or css transition
- Makes stickers, the Info-Panel, closable elements
- Lets animate text
- Lets use random direction and easing attributes
- Makes auto-closable elements with counter-down
- Includes 6 classes: EasyloadPlugin, EasyloadEmergingPlugin, EsyloadAnimatedPlugin, EasyloadTextPlugin, EasyloadTransitionPlugin, EasyloadPanelPlugin
- Uses either page mark-up or javascript
- Very easy to use
- Well Documented
- Has multiple examples
- Free support
- Easy installation
- YUI library is used
- Cross browser support
Examples of usage:
You can add animated effect by mark-up:
<div class="el-animated" data-duration="5" data-delay="6" data-after="#main" data-closable="true" data-closeAfter="15" data-easing="backIn" data-counter="#counter">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque natus aperiam minima, a, tempore sed in delectus aliquam accusantium harum unde earum illo pariatur asperiores, cupiditate amet autem dolorem! Commodi.</div>
Or you can add animated effect byScript:
<script type="text/javascript">
YUI().use('node', 'easyload_animated', function (Y) {
var node = Y.one('#item');
node.plug(Y.EasyloadAnimatedPlugin, {
duration: 5,
delay: 6,
after: '#main',
closable: true,
closeAfter: 15,
easing: 'backIn',
counter: '#counter'
});
});
</script>