To make the animation more realistic, the pace of typing is not as smooth as you would expect from a plain concatenation of characters, far from it: the characters are typed more or less quickly based on their type (uppercase, white space, number, and so on). But I have to note that despite my attempt to contaminate the typing-like animation by traits of the human factor, the script is anyway simple in nature, and as such it stays tied to the predictability of the virtual world.
Type, Delete, ReplaceWith ... Stop
CharWriter class has four self-explanatory public methods:
- CharWriter::type( text, callback, delay ) — types into the target HTML tag the
textreceived as input, by executing the optional
callbackonce the animation is over.
delayis an optional argument through which you can tell the method after how many milliseconds from the end of the animation
callbackmust be executed.
- CharWriter::delete( callback, delay ) — animates the deletion of the text content of the target HTML tag. The two optional arguments have the same use as the homonymous arguments of the
- CharWriter::replaceWith( text ) — replaces the text content of the target HTML tag with the
textpassed as input by animating both the deletion and the insertion tasks.
- CharWriter::stop( haltDelay, callback ) — halts the currently running animation after an optional number of milliseconds set by
callbackis the optional function that must be executed once the current animation has been stopped.
The following code shows how by starting from a
CharWriter object you can let it first type some text into the target HTML tag, and then let it replace the typed text when the target HTML tag receives a click event: