jQuery Plugin For Sequential Entrance Animations - chain-fade

File Size: 17.5 KB
Views Total: 2321
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin For Sequential Entrance Animations - chain-fade

chain-fade is a super easy jQuery plugin that allows a series of arbitrary DOM elements to be displayed sequentially, with a configurable fade in animation effect. You can use this plugin to trigger an entrance animation for instance.

How to use it:

1. Add the jQuery chain-fade plugin's script after jQuery library as this:

<!-- jQuery -->
<script src="//code.jquery.com/jquery.min.js"></script>
<!-- Chain Fade -->
<script src="js/chain_fade.js"></script>

2. Call the function on the target content sections where you want to apply the entrance animation.


3. To customize the entrance animation, just by passing the following options as an object to the instance.


  // Time in miliseconds before the animation starts
  startAt: 0,

  // Time in miliseconds between each animation
  interval: 300,

  // Speed of the animation in miliseconds
  speed: 700,

  // The type of animation. For the moment is just 'fade' :3
  fx: 'fade',

  // Initial distance of each elements
  distance: 50,

  // Direction of the animation: 'forward' or 'backward'
  direction: 'forward',

  // Where the element should go: toThe 'left', 'right', 'bottom' or 'top'
  toThe: 'top',

  // To apply the same height based on the taller element
  fixedHeight: false,

  // If you want to see the selected options in the console
  messages: false,

  // Change to false if you want to animate all the elements at once if you don't have a container for those elements
  queue: true,

  ease: 'swing',

  // Callback function
  after: function(){}

This awesome jQuery plugin is developed by redthree. For more Advanced Usages, please check the demo page or visit the official website.