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
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 is150
.speedUp
: Boolean indicating whether the animation should become faster towards the end. Default isfalse
.