Movatterモバイル変換


[0]ホーム

URL:


Textualizer

A jQuery text animation plugin

View on GitHub
Tweet

# Demo

var list = ['first blurb', 'second blurb', 'third blurb'];  // list of blurbsvar txt = $('#txtlzr');  // The container in which to render the listvar 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

# 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');

[8]ページ先頭

©2009-2025 Movatter.jp