In a recent web project, we came across the need to use an effect to replicate human interaction and emulate this on the website. The requirement was to type out text, optionally delete portions or all of the output and allow simple options to be used to determine the speed, delays amongst other possibilities.
As often is the case, there were a few options to use from exiting jQuery plugins, however none that I came across worked close enough to the requirement – without drastically modifying them to suit. Having previous experience creating plugins using the jQuery library, piecing something together to produce the desired effect was something to look forward to.
On a quiet Sunday afternoon, the first draft of the Teletype jQuery Plugin was complete within a few hours, and soon after released into the public domain. It’s been a while since a small personal project like this has been packaged up and shared with the community, which was one of the main reasons for proceeding with the idea.
Requirements
- jquery.js – 2.1.1 was used during development of this plugin.
Documentation
For full details on the plugin, including the customisation options that can be defined, please refer to the readme hosted on GitHub.
Online Demo
A basic example of the plugin can be found at http://teletype.rocks, with all documentation and downloads available from the public GitHub repo.
Customisable options can be passed through to the demo site to produce examples of the plugin options.
For example, setting the `preserve` option to true visit http://teletype.rocks/?preserve=true.
This is true for many of the options described in the readme, allowing you to preview the potential of the plugin.
In this example, we preserve the output rather than deleting it, only loop through the text once, set the prefix to "> " and the cursor as "*".
http://teletype.rocks/?preserve=true&loop=1&prefix=%3E%20&cursor=*
If you intend to use this plugin or have already implemented it in your project, I’d be pleased to see some examples of it in use out in the wild.
Stv.Whtly 
Great plugin. Is there any way to include links within the text that is output? I tried to convert any hyperlink tags in a similar fashion to the n line break but haven’t had much luck.
LikeLike
There was some initial work done on a HTML parsing version, available here: https://github.com/stvwhtly/jquery-teletype-plugin/tree/0.2-alpha – however it is very much an alpha version.
LikeLike
Brilliant. Slight visual issue when hyperlink text is being typed out but it’s no train smash. Thanks.
LikeLike