Author: | mattboldt |
---|---|
Views Total: | 84 views |
Official Page: | Go to website |
Last Update: | November 8, 2023 |
License: | MIT |
Preview:

Description:
Just another JavaScript text typing animation library that animates your text to make it look like it is being typing.
Installation:
# Yarn $ yarn add typed.js # NPM $ npm install typed.js --save # Bower $ bower install typed.js
How to use it:
Download and insert the typed.js JavaScript library into the html page.
<script src="typed.min.js"></script>
Define an array of strings to type in the page.
var typed = new Typed(".element", { strings: ["String 1", "& String 2", ...] });
You are also allowed to type the text defined in the HTML as follows:
div class="type-wrap"> <div id="typed-strings"> <span>Typed.js^10 is a <strong>JavaScript</strong> library.</span> <p>It <em>types</em> out sentences.</p> <p>And then deletes them.</p> <p>Try it out!</p> </div> <span id="typed" style="white-space:pre;"></span> </div>
var typed = new Typed("#typed", { stringsElement: '#typed-strings' });
All default configuration options.
/** * @property {array} strings strings to be typed * @property {string} stringsElement ID of element containing string children */ strings: ['These are the default values...', 'You know what you should do?', 'Use your own!', 'Have a great day!'], stringsElement: null, /** * @property {number} typeSpeed type speed in milliseconds */ typeSpeed: 0, /** * @property {number} startDelay time before typing starts in milliseconds */ startDelay: 0, /** * @property {number} backSpeed backspacing speed in milliseconds */ backSpeed: 0, /** * @property {boolean} smartBackspace only backspace what doesn't match the previous string */ smartBackspace: true, /** * @property {boolean} shuffle shuffle the strings */ shuffle: false, /** * @property {number} backDelay time before backspacing in milliseconds */ backDelay: 700, /** * @property {boolean} fadeOut Fade out instead of backspace * @property {string} fadeOutClass css class for fade animation * @property {boolean} fadeOutDelay Fade out delay in milliseconds */ fadeOut: false, fadeOutClass: 'typed-fade-out', fadeOutDelay: 500, /** * @property {boolean} loop loop strings * @property {number} loopCount amount of loops */ loop: false, loopCount: Infinity, /** * @property {boolean} showCursor show cursor * @property {string} cursorChar character for cursor * @property {boolean} autoInsertCss insert CSS for cursor and fadeOut into HTML <head> */ showCursor: true, cursorChar: '|', autoInsertCss: true, /** * @property {string} attr attribute for typing * Ex: input placeholder, value, or just HTML text */ attr: null, /** * @property {boolean} bindInputFocusEvents bind to focus and blur if el is text input */ bindInputFocusEvents: false, /** * @property {string} contentType 'html' or 'null' for plaintext */ contentType: 'html',
Callback functions.
/** * All typing is complete * @param {Typed} self */ onComplete: function onComplete(self) {}, /** * Before it begins typing * @param {Typed} self */ onBegin: (self) => {}, /** * Before each string is typed * @param {number} arrayPos * @param {Typed} self */ preStringTyped: function preStringTyped(arrayPos, self) {}, /** * After each string is typed * @param {number} arrayPos * @param {Typed} self */ onStringTyped: function onStringTyped(arrayPos, self) {}, /** * During looping, after last string is typed * @param {Typed} self */ onLastStringBackspaced: function onLastStringBackspaced(self) {}, /** * Typing has been stopped * @param {number} arrayPos * @param {Typed} self */ onTypingPaused: function onTypingPaused(arrayPos, self) {}, /** * Typing has been started after being stopped * @param {number} arrayPos * @param {Typed} self */ onTypingResumed: function onTypingResumed(arrayPos, self) {}, /** * After reset * @param {Typed} self */ onReset: function onReset(self) {}, /** * After stop * @param {number} arrayPos * @param {Typed} self */ onStop: function onStop(arrayPos, self) {}, /** * After start * @param {number} arrayPos * @param {Typed} self */ onStart: function onStart(arrayPos, self) {}, /** * After destroy * @param {Typed} self */ onDestroy: function onDestroy(self) {}
Changelog:
v2.1.0 (11/08/2023)
- Bugfixes
v2.0.16 (05/01/2023)
- Bugfixes
v2.0.15 (04/02/2023)
- Bugfixes
v2.0.14 (03/25/2023)
- Fixed missing TypedOptions type interface declaration.
v2.0.13 (03/12/2023)
- Switched bundler from old gulp implementation to microbundle
- Removed old dev dependencies
- Changed implementation of hidden “strings element” to be more accessible
v2.0.12 (03/27/2021)
- Bugfix
- Adds aria-hidden to blinking cursor
v2.0.11 (09/24/2019)
- Code formatting fixes (via prettier)
- Added onBegin callback
v2.0.9 (01/31/2019)
- Bugfixed
v2.0.8 (06/14/2018)
- Fixed: Cursor not blinking unless FadeOut is present
v2.0.7 (05/27/2018)
- fixed conflicts and tested demo