19 |
<script src="https://cdn.jsdelivr.net/gh/dlcnine/TypeWriter@1.0.0/dist/typewriter.min.js"></script>const tw = new TypeWriter('#target');
24 |
25 | tw.write('The quick brown fox').wait(500).newLine()
26 | .writeWords(' jumped over the').wait(500).writeAll(' lazy dog.').wait(500).eraseAll();
27 | TypeWriter sets a default speed of 50, if the speed argument is not provided.
32 |const tw = new TypeWriter('#target');
33 |
34 | // or
35 |
36 | const twCustomSpeed = new TypeWriter('#target2', 100);
37 | 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.
42 | 43 |44 |
const writeExample = new TypeWriter('#writeExample');
45 |
46 | // no options
47 | writeExample.eraseAll().write('The quick brown fox jumps over the lazy dog.');
48 |
49 | // options
50 | writeExample.eraseAll().write('The quick brown fox jumps over the lazy dog.', {speed: 150, class: 'text-underline'});
51 |
52 | 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.
57 | 58 |59 |
const writeWordsExample = new TypeWriter('#writeWordsExample');
60 |
61 | // no options
62 | writeWordsExample.eraseAll().writeWords('The quick brown fox jumps over the lazy dog.');
63 |
64 | // options
65 | writeWordsExample.eraseAll().writeWords('The quick brown fox jumps over the lazy dog.', {speed: 300, class: 'text-underline'});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.
71 | 72 |73 |
const writeAllExample = new TypeWriter('#writeAllExample');
74 |
75 | // no options
76 | writeAllExample.eraseAll().writeAll('The quick brown fox jumps over the lazy dog.').wait(1000);
77 |
78 | // options
79 | writeAllExample.eraseAll().writeAll('The quick brown fox jumps over the lazy dog.', {speed: 300, class: 'text-underline'});Removes the specified amount of characters from the target element. Erasing stops when there are no charcters left, or the amount has reached zero.
85 | 86 |87 |
const eraseExample = new TypeWriter('#eraseExample');
88 |
89 | // default speed
90 | eraseExample.eraseAll().write('The quick brown').write(' fox jumps over', {class: 'text-underline'}).write(' the lazy dog.').erase(35).wait(1000);
91 |
92 | // optional speed
93 | eraseExample.eraseAll().wait(500).write('The quick brown').write(' fox jumps over', {class: 'text-underline'}).write(' the lazy dog.').erase(35, 150);Removes the specified amount of words from the target element. Before and after each word is removed, the end whitespace is trimmed.
99 | 100 |101 |
const eraseWordsExample = new TypeWriter('#eraseWordsExample');
102 |
103 | // default speed
104 | eraseWordsExample.eraseAll().write('The quick brown').write(' fox jumps over', {class: 'text-underline'}).write(' the lazy dog.').eraseWords(7).wait(500);
105 |
106 | // optional speed
107 | eraseWordsExample.eraseAll().wait(500).write('The quick brown').write(' fox jumps over', {class: 'text-underline'}).write(' the lazy dog.').eraseWords(7, 500);Removes all content from the target element.
113 | 114 |115 |
const eraseAllExample = new TypeWriter('#eraseAllExample');
116 |
117 | eraseAllExample.write(' The quick brown fox jumps over the lazy dog.').wait(500).eraseAll();Waits n milliseconds before exeucting the next method.
123 | 124 |125 |
const waitExample = new TypeWriter('#waitExample');
126 |
127 | waitExample.eraseAll().write('The quick brown fox ').wait(1000).write('jumps over the lazy dog.');Starts a new line.
133 | 134 |135 |
const newLineExample = new TypeWriter('#newLineExample');
136 |
137 | newLineExample.eraseAll().write('The quick brown fox ').newLine().write('jumps over the lazy dog.');Set the default speed (in milliseconds).
143 | 144 |145 |
const setSpeedExample = new TypeWriter('#setSpeedExample');
146 |
147 | setSpeedExample.eraseAll().write('The quick brown fox ').setSpeed(200).write('jumps over the lazy dog.').setSpeed(50);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.
153 | 154 | 155 |156 |
function bodyColors(backgroundColor, color) {
157 | const body = document.querySelector('body');
158 | body.style.backgroundColor = backgroundColor;
159 | body.style.color = color;
160 | }
161 |
162 | const callBackExample = new TypeWriter('#callBackExample');
163 |
164 | 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)']);