Have you ever wanted to animate text like this? Well now you can with jquery-say!
Add your own custom CSS to the `text-character` and `text-character hidden` classes for more effects.
Hook into callbacks on each character, at the end of a sentence, at the end of an element, and whenever the whole animation completes.
$(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 ){}
});
});
bower install jquery-say
-- Or with jam
jam install jquery-say
View the source of this page to see how the effects are done.