Simple Typewriter Effect In Pure JavaScript – TypewriterJS
| AUTHOR: | tameemsafi |
|---|---|
| VIEWS TOTAL: | 1,532 views |
| OFFICIAL PAGE: | Go to website |
| LAST UPDATE: | November 24, 2020 |
| LICENSE: | MIT |
Preview:
Description:
TypewriterJS is a native javascript plugin that can be used to create an elegant automatic typewriter animation effect on websites.
See also:
How to use it:
Load the main JS file typewriter.js right before the closing body tag.
<script src="typewriter.js"></script>
Create a placeholder element:
<div id="demo"></div>
Initialize the library on the element and specify an array of strings to type out.
var demo = document.getElementById('demo');
var typewriter = new Typewriter(demo, {
strings: ['Strings', 'To', 'Type']
});Available API methods to control the typing animation.
// starts the typing animation typewriter.start() // Stops the animation typewriter.stop() // Time to pause for in milliseconds typewriter.pauseFor(ms) // String to type out typewriter.typeString(string) // Paste out a string typewriter.pasteString(string) // Deletes all strings typewriter.deleteAll() // Deletes a amount of characters typewriter.deleteChars(number) // callback typewriter.callFunction(cb); // Changes thedeleting speed typewriter.changeDeleteSpeed(speed); // Changes the delay typewriter.changeDelay(delay);
All configuration options to customize the typing animation.
var typewriter = new Typewriter(demo, {
strings: ['Strings', 'To', 'Type'],
cursor: '|',
delay: 'natural', // 'natural' or Number
loop: false, // infinite loop
autoStart: false,
devMode: false,
wrapperClassName: 'Typewriter__wrapper',
cursorClassName: 'Typewriter__cursor',
});Changelog:
11/24/2020
- v2.17.0: Remove onStringTyped as onCreateTextNode can be used to achieve the same result
11/20/2020
- v2.14.0: Add method to create text nodes, fix unit tests
05/01/2020
- v2.13.1: Respect deleteSpeed when looping through strings
03/10/2020
- v2.13.0: Bugfix
09/18/2019
- v2.12.1: Fix issue with nested html string not typed out correctly and cursor not changing back to initial on loop
07/29/2019
- v2.10.0: Fix issue with event loop causing start of loop to be delayed
06/30/2019
- v2.8.2: Removing un-used code to reduce bundle size
06/29/2019
- v2.7.1: Fix issue with nested html string not typed out correctly and cursor not changing back to initial on loop
06/19/2019
- v2.6.0: Adding change_cursor event/functionality
06/17/2019
- v2.5.4: Update
03/17/2019
- v2.5.3: Fixing issue with not deleting nodes in IE11
12/04/2018
- v2.5.2: Fixing issue with delete chars and loop
12/03/2018
- v2.5.1: Fixed issue with increasing exponentially times
11/21/2018
- v2.4.4: Fixed IE11 issues
09/20/2018
- v2.4.4: Added ability to change typing delay
09/16/2018
- v2.3.3: Updated options & API.
09/11/2018
- v2.2.0: Remove all characters before re-starting loop
08/27/2018
- v2.0.0
