Render Text In A Typewriter Style – OlumWriter

Preview:

Description:

OlumWriter is a JavaScript library for printing text on the page just like a human typing on a typewriter.

See It In Action:

How to use it:

1. Create a container in which the text will be typed.

<div id="writer"></div>

2. Load the OlumWriter JavaScript library.

<script src="olum-writer.min.js"></script>

3. Initialize the OlumWriter and define an array of strings to be typed.

new OlumWriter({
    container: document.getElementById("writer"),
    sentences: ["Sentence one", "Sentence two", "Sentence three"],
});

4. Set the time between each sentence.

new OlumWriter({
    container: document.getElementById("writer"),
    sentences: ["Sentence one", "Sentence two", "Sentence three"],
    interval: 3000,
});

5. Customize the animation speed.

new OlumWriter({
    container: document.getElementById("writer"),
    sentences: ["Sentence one", "Sentence two", "Sentence three"],
    speed: 2000,
});

6. Determine whether to enable backward writing.

new OlumWriter({
    container: document.getElementById("writer"),
    sentences: ["Sentence one", "Sentence two", "Sentence three"],
    reverse: true,
});