Render Text In A Typewriter Style – OlumWriter

Category: Animation , Recommended , Text | October 25, 2021
Author:olumjs
Views Total:64 views
Official Page:Go to website
Last Update:October 25, 2021
License:MIT

Preview:

Render Text In A Typewriter Style – OlumWriter

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,
});

You Might Be Interested In:


Leave a Reply