textualizer

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.

Supported browsers

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)

Contact

If you encounter any problems, please use the GitHub issue tracker.
For anything else, feel free to email me.
If you like textualizer and use it in the wild let me know.