jQuery

【jQuery】テキストアニメーションjQueryプラグインTextualizer

September 9, 2016
Textualizer

Textualizerはテキストにアニメーションを付加できるjQueryプラグイン。

HTML

<div id="txtlzr">
<p>Textualizer is a jQuery plug-in that allows you to transition through blurbs of text. </p>
<p>When transitioning to a new blurb, any character that is common to the next blurb is kept on the screen, and moved to its new position.</p>
<p>Textualize: verb - to put into text, set down as concrete and unchanging.  Use Textualizer to transition through blurbs of text.</p>
<p>Blurb: noun - a short summary or some words of praise accompanying a creative work.  A promotional description.</p>
</div> 

<script type="text/javascript"> 
    $(function() {
          var txt = $('#txtlzr'); 
          txt.textualizer();
          txt.textualizer('start');
    })
  </script> 

API

  1. .textualizer('pause')
  2. .textualizer('stop')
  3. .textualizer('destroy')

Events

.on('textualizer.changed')

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