Textualizer

Download:

• textualizer.js - (12.67 kb) development
• textualizer.min.js - (4.83 kb) production

Usage

var list = ['first blurb', 'second blurb', 'third blurb'];  // list of blurbs

var txt = $('#txtlzr');  // The container in which to render the list

var options = {
  duration: 1000,          // Time (ms) each blurb will remain on screen
  rearrangeDuration: 1000, // Time (ms) a character takes to reach its position
  effect: 'random',        // Animation effect the characters use to appear
  centered: true           // Centers the text relative to its container
}

txt.textualizer(list, options); // textualize it!
txt.textualizer('start'); // start

Animation effects

Textualizer currently has the following effects: fadeIn, slideLeft, slideTop, and random. You can choose which effect to use by setting the effect option.

API

• .textualizer('pause')

  Pauses all animation at the next blurb. That is, once all characters have finished moving to their position, the animation will pause.

• .textualizer('stop')

  Stops the animation, and removes the blurbs.

• .textualizer('destroy')

  Destroy and disposes of the textualizer instance.

Events

• .on('textualizer.changed')

  Triggers when a blurb has completed animating, before switching to the next blurb in the list.

  
  

  txt.on('textualizer.changed', function(event, args) {
    // check if it's the last index in the array
    if (args.index === LAST_INDEX) {
      txt.textualizer('pause');
    }
  });
  
  txt.textualizer('start');
  

Browser support

Textualizer has been successfully tested in the following browsers:

• Chrome
• Safari 4+
• Firefox 3.5+
• IE 6,7,8,9+
• Opera 10.6+
• Mobile Safari (iOS 4+)

Problems?

If you encounter any problems, please use the GitHub issue tracker (GitHub account required).

For anything else, feel free to email me, or post a comment below.