jQuery Plugin To Fade In Elements On Page Load - FadeInAmate

jQuery Plugin To Fade In Elements On Page Load - FadeInAmate
File Size: 60.6 KB
Views Total:
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:

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.