typewriter
typewriter()
The typewriter is a simple animation function to emulate text being typed into a page, the function uses a low overhead model by employing setTimeout() rather than a do, sleep, do again routine.
Usage
Take existing content and animate it.
1 | $('#target_div_id').typewriter(); |
The above will take the existing html and write it back to the same div at a 150ms delay per char.
Example 1 – Use existing content
This is the content that will be animated by typewriter()…
Source
1 2 3 4 5 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script src="http://svn.saiweb.co.uk/branches/jquery_plugin/tags/0.3/jquery.saiweb.min.js" type="text/javascript"></script> <div id='target_div_id'>This is the content that will be animated by typewriter()...</div> <a name="typewriter"></a> <a href="#typewriter" onclick="$('#target_div_id').typewriter();">typewriter()</a> |
Advanced
1 2 3 4 5 | $('#target_div_id').typewriter({ delay: 150, pos: 0, text: 'This is some replacement text' }); |
All the options above can be using singularly or together.
- delay: the time in milliseconds between characters
- pos: The positional offset for startpoint of the animation
- text: The text overide, use this if you do not want to use the existing content
1 2 3 | $('#target_div_id').typewriter({delay: 1000}); $('#target_div_id').typewriter({pos: 10}); $('#target_div_id').typewriter({text: 'This is some replacement text'}); |
NOTE: If you have firebug install you can try all these examples in the page.
Entries (RSS)