Birdman Style Credits Animation In jQuery - Birdman.js

Birdman.js is a jQuery text animation plugin that fades in the letters in the text in alphabetical order as you've seen in the credits of the Birdman movie.

Heavily based on the Lettering.JS library.

How It Works:

• Split the text into letters/words/lines wrapped in <span>.
• Gather all spans for each group of characters that should be animated together e.g. ['a','A'].
• Animate the different groups.
• Use Jquery's fadeIn() function to change the display property, not the visibility.

How to use it:

1. Load the main script birdman.js after the latest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/birdman.js"></script>

2. Call the main function birdman on the target text container element and done.

<p class="birdman">jQueryScript.Net</p>
<p class="birdman">A jQuery Plugin Website</p>

$(function(){
  $('.birdman').birdman();
});

3. Determine how to split text:

• letters (default)
• words
• lines

$(function(){
  $('.birdman').birdman({
    method: 'words'
  });
});

4. Customize the animation delay. Default: 150ms.

$(function(){
  $('.birdman').birdman({
    delay: 300
  });
});

5. Determine whether to speed up the animation. Default: false.

$(function(){
  $('.birdman').birdman({
    speedUp: true
  });
});

6. Set the order of the text animation: e.g. [['a','A'],['b','B'],...].

$(function(){
  $('.birdman').birdman({
    order: ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z']
  });
});

---

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