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.

 

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.

 

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.

 

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.

 

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.

 

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.

 

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.

 

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.

 

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).

 

const setSpeedExample = new TypeWriter('#setSpeedExample');

setSpeedExample.eraseAll().write('The quick brown fox ').setSpeed(200).write('jumps over the lazy dog.').setSpeed(50);

.callBack(cb, args)function, array(optional)

Pass in your own function definition to be executed. The args argument is an optional array of arguments to be spread and passed to your callback function.

 

function bodyColors(backgroundColor, color) {
    const body = document.querySelector('body');
    body.style.backgroundColor = backgroundColor;
    body.style.color = color;
}

const callBackExample = new TypeWriter('#callBackExample');

callBackExample.eraseAll().write('How about a change of scenery?').wait(500).callBack(bodyColors, ['black', 'whitesmoke']).wait(500).write('...', {speed: 500}).write(' Okay, maybe not.').wait(500).callBack(bodyColors, ['rgb(250, 250, 250)', 'rgba(0, 0, 0, 0.8)']);

- dlcnine -