Submit your widget

JQuery fadeIn, slideLeft, slideTop effect with text

Created 12 years ago   Views 25492   downloads 5078    Author kiro
JQuery fadeIn, slideLeft, slideTop effect with text
View DemoDownload
Share |

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.


  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


  • .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)

Read more: