jQuery Plugin To Fade In Elements On Page Load - FadeInAmate

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.