birdman.js is a JQuery plugin to animate the text like in the 2014 movie “Birdman” credits fading into the letters in the text in alphabetical order like you’ve seen in the Birdman movie credits.
Must Read: A JavaScript Animation Text Typing Library | typed.js
How to make use of it:
1. Load the script birdman.js after the newest jQuery library.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/birdman.js"></script>
2. Call the function birdman on the text container component.
<p class="birdman">webcodeflow.com</p> <p class="birdman">Latest Free JavaScript & jQuery Plugins</p>
$(function(){
$('.birdman').birdman();
});3. Determine the textual content:
$(function(){
$('.birdman').birdman({
method: 'words'
});
});4. Customize the animation delay.
$(function(){
$('.birdman').birdman({
delay: 300
});
});5. Determine whether or not to speed up the animation.
$(function(){
$('.birdman').birdman({
speedUp: true
});
});6. Set the order of the textual content 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']
});
});Configuration
The birdman the function takes an object with configuration options. Supported are:
Must Read: Switch Text With Smooth Animations | jQuery Animated Headlines
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 number of milliseconds between each animation. Default is150.speedUp: Boolean indicating whether the animation should become faster towards the end. Default isfalse.
See Demo And Download
Official Website(chrisma): Click Here
This superior jQuery/javascript plugin is developed by chrisma. For extra Advanced usage, please go to the official website.
