Animate text displaying characters one-by-one with a specified delay, and a different delay between the ends of sentences and elements
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore
.jshintrc
Gruntfile.js
README.md
bower.json
package.json

README.md

jquery.say

Animates text to display letter-by-letter kind of like the way speech text is displayed in video games.

http://jquery-say.j0.hn

Install

Install with jam or bower

bower install jquery-say
jam install jquery-say

Example

Ensure that whatever text you want to animate, that its visibility is set to hidden. Otherwise, you'll see the text until the $.fn.say function is called.

Make all p tags animate their text:

<!DOCTYPE HTML>
<html>
  <head>
    <script>
    $(function(){
      $('p').say({
        // default: 50;   Time between each character
        delay:              50 
        // default: 800;  Time between each element
      , elementJumpDelay:   800
        // default: 500;  Time between each sentence
      , endOfSentenceDelay: 500
        // default .?!;   Character denoting sentence end
      , endOfSentenceChar: [ '.', '?', '!' ]
        // Called when the entire sequence is complete
      , onComplete:       function(){}
        // Called when an element is complete
      , onEndOfElement:   function( $prev, $curr ){}
        // Called when a sentence is complete
      , onEndOfSentence:  function( $el ){}
        // Called for each character processed
      , onChar:           function( character, $el ){}
      });
    });
    </script>
  </head>
  <body>
    <p>I am going to animate. There's a short delay between each sentence, right?</p>
    <p>Yes, there is! And a longer one between element.</p>
  </body>
</html>