🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A jQuery plugin to animate text as in the credits of the 2014 movie “Birdman”.

Animation Plugins Text Effect

Documentation

birdman.js

A JQuery plugin to animate text as in the credits of the 2014 movie "Birdman".
See it in action at chrisma.github.io/birdman.js

asdf

I'm aware that Birdman was not the first movie to use this effect, but the name is so nice.

Demos for 'words' and 'lines' methods are here.

Setup

  • Include JQuery (if you haven't already)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  • Download the birdman.js file and serve it locally OR load it from a CDN:
<!-- Local --> <script src="birdman.js"></script> <!-- or CDN --> <script src="https://cdn.rawgit.com/chrisma/birdman.js/gh-pages/birdman.js"></script>
  • Initialize the plugin on the content you want birdmanned. This works with any styling.
$('.birdman').birdman();

Configuration

The birdman function takes an object with configuration options. Supported are:

  • method: The method used to split the text. Default is 'letters'. Other options are 'words' and 'lines'.
  • order: An array deciding the order in which parts are animated, e.g. ['a','b','c',...], if more than one part is supposed to be animated at the same time, put them in a separate array, e.g. [['a','A'],['b','B'],...]. Default is case insensitive alphabetical order (for the 'letters' method). For 'words' and 'lines' there is no default and this must be set for birdman.js to work.
  • delay: The amount of milliseconds between each animation. Default is 150.
  • speedUp: Boolean indicating whether the animation should become faster towards the end. Default is false.

You May Also Like