A few days ago I opened a public repository on GitHub to share some JavaScript I had just refactored, today I would like to introduce it to you. CharWriter is an unpretentious JavaScript ES6 class whose instances are able to insert, delete and replace text into an HTML tag by animating the task in a typing-like fashion.
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
The CharWriter
class has four self-explanatory public methods:
- CharWriter::type( text, callback, delay ) — types into the target HTML tag the
text
received as input, by executing the optionalcallback
once the animation is over.delay
is an optional argument through which you can tell the method after how many milliseconds from the end of the animationcallback
must 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::type()
method. - CharWriter::replaceWith( text ) — replaces the text content of the target HTML tag with the
text
passed 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
haltDelay
.callback
is the optional function that must be executed once the current animation has been stopped.
An Example
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:
1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="UTF-8">
5 <title>CharWriter Example</title>
6 <script src="charwriter.js"></script>
7</head>
8
9<body>
10<p id="text"></p>
11
12<script>
13// The animation starts once the document has been fully loaded.
14window.addEventListener( 'load', () => {
15 // CharWriter objects must be inizialised with the ID attribute
16 // of the target HTML tag — 'text' in our example.
17 const writer = new CharWriter( 'text' );
18
19 // Function called when the target node receives a click event.
20 let startReplacing = ( event ) => {
21 // The 'replaceWith' animation is allowed to be launched only once.
22 event.target.removeEventListener( 'click', startReplacing );
23
24 writer.replaceWith( 'Lorem ipsum dolor sit amet, 1 Jan 2022, consectetur adipisicing elit ...' );
25 };
26
27 // Function called when the 'type' animation is over.
28 let addClickEvent = () => writer.target.addEventListener( 'click', startReplacing );
29
30 // The 'type' animation starts 1 second after
31 // the document has been fully loaded.
32 setTimeout( () => writer.type( 'Click to replace this text.', addClickEvent ), 1000 );
33} );
34</script>
35</body>
36</html>