JQuery Plugin to Style Credits Animation Text | birdman.js

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 is 150.
  • speedUp: Boolean indicating whether the animation should become faster towards the end. Default is false.

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.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…

Nepali-Date-Picker-jQuery-Plugin

Nepali Date Picker jQuery Plugin | nepaliDatePicker

Nepali Date Picker is a customizable, easy-to-use, and input-based date picker plugin mostly based on the Nepali calendar. Users can choose a Nepali date in the navigable…

Floating-Whatsapp-Chat-Button

How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API….

Leave a Reply

Your email address will not be published. Required fields are marked *