TypeWriter

Installation

<script src="https://cdn.jsdelivr.net/gh/dlcnine/TypeWriter@1.0.0/dist/typewriter.min.js"></script>

Usage

const tw = new TypeWriter('#target'); tw.write('The quick brown fox').wait(500).newLine() .writeWords(' jumped over the').wait(500).writeAll(' lazy dog.').wait(500).eraseAll();

API

new TypeWriter(cssSelector, speed) string, number(optional) TypeWriter sets a default speed of 50, if the speed argument is not provided. const tw = new TypeWriter('#target'); // or const twCustomSpeed = new TypeWriter('#target2', 100);

.write(text, options) string, object(optional) Renders the text one character at a time. The options object may set properties for speed and class. To use more than one class, sepearate each sequential class name with a space. View Example const writeExample = new TypeWriter('#writeExample'); // no options writeExample.eraseAll().write('The quick brown fox jumps over the lazy dog.'); // options writeExample.eraseAll().write('The quick brown fox jumps over the lazy dog.', {speed: 150, class: 'text-underline'});

.writeWords(text, options) string, object(optional) Renders the text word by word. Internally words are split on single spaces, ' '. The options object may set properties for speed and class. To use more than one class, sepearate each sequential class name with a space. View Example const writeWordsExample = new TypeWriter('#writeWordsExample'); // no options writeWordsExample.eraseAll().writeWords('The quick brown fox jumps over the lazy dog.'); // options writeWordsExample.eraseAll().writeWords('The quick brown fox jumps over the lazy dog.', {speed: 300, class: 'text-underline'});

.writeAll(text, options) string, object(optional) Renders the entire text at once. The options object may set properties for speed and class. To use more than one class, sepearate each sequential class name with a space. View Example const writeAllExample = new TypeWriter('#writeAllExample'); // no options writeAllExample.eraseAll().writeAll('The quick brown fox jumps over the lazy dog.').wait(1000); // options writeAllExample.eraseAll().writeAll('The quick brown fox jumps over the lazy dog.', {speed: 300, class: 'text-underline'});

.erase(amount, speed) number, number(optional) Removes the specified amount of characters from the target element. Erasing stops when there are no charcters left, or the amount has reached zero. View Example const eraseExample = new TypeWriter('#eraseExample'); // default speed eraseExample.eraseAll().write('The quick brown').write(' fox jumps over', {class: 'text-underline'}).write(' the lazy dog.').erase(35).wait(1000); // optional speed eraseExample.eraseAll().wait(500).write('The quick brown').write(' fox jumps over', {class: 'text-underline'}).write(' the lazy dog.').erase(35, 150);

.eraseWords(amount, speed) number, number(optional) Removes the specified amount of words from the target element. Before and after each word is removed, the end whitespace is trimmed. View Example const eraseWordsExample = new TypeWriter('#eraseWordsExample'); // default speed eraseWordsExample.eraseAll().write('The quick brown').write(' fox jumps over', {class: 'text-underline'}).write(' the lazy dog.').eraseWords(7).wait(500); // optional speed eraseWordsExample.eraseAll().wait(500).write('The quick brown').write(' fox jumps over', {class: 'text-underline'}).write(' the lazy dog.').eraseWords(7, 500);

.eraseAll() Removes all content from the target element. View Example const eraseAllExample = new TypeWriter('#eraseAllExample'); eraseAllExample.write(' The quick brown fox jumps over the lazy dog.').wait(500).eraseAll();

.wait(milliseconds) number Waits n milliseconds before exeucting the next method. View Example const waitExample = new TypeWriter('#waitExample'); waitExample.eraseAll().write('The quick brown fox ').wait(1000).write('jumps over the lazy dog.');

.newLine() Starts a new line. View Example const newLineExample = new TypeWriter('#newLineExample'); newLineExample.eraseAll().write('The quick brown fox ').newLine().write('jumps over the lazy dog.');

.setSpeed(speed) number Set the default speed (in milliseconds). View Example const setSpeedExample = new TypeWriter('#setSpeedExample'); setSpeedExample.eraseAll().write('The quick brown fox ').setSpeed(200).write('jumps over the lazy dog.').setSpeed(50);