jQuery Plugin To Fade In Elements On Page Load - FadeInAmate
File Size: | 60.6 KB |
---|---|
Views Total: | 4524 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

FadeInAmate is a lightweight jQuery plugin used to fade in elements sequentially with a custom slide down animation when the page loads. Powered by CSS3 transitions.
See also:
- Create Material Design Hierarchical Timing Transitions with jQuery and CSS3
- jQuery Plugin To Fade In Html Elements - Random Fade In
- jQuery Plugin To Fade In Elements When They Enter The Viewport - Lazy View
- jQuery Plugin To Fade In/Out Html Elements - jQFader
- Lightweight jQuery Fade In/Out Slideshow - Fade Through
How to use it:
1. Include the jQuery FadeInAmate plugin after loading jQuery library.
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script> <script src="src/jquery.fadeInAmate.js"></script>
2. Add a CSS class to Html elements you wish to apply the fade-in animation on page load.
<div class="fadeInAmate"> ... </div> <div class="fadeInAmate"> ... </div> <div class="fadeInAmate"> ... </div> ...
3. Call the plugin and config the fade-in animation.
$(".fadeInAmate").fadeInAmate({ initialDelay: 250, fadeInSpeed: 900, animationDelay: 300, // enable the slide down animation bounce: true });
This awesome jQuery plugin is developed by jforaker. For more Advanced Usages, please check the demo page or visit the official website.