text-typing-typed-js

A JavaScript Animation Text Typing Library | typed.js

by

Typed.js is a JavaScript typing animation library that animates the text to make it appear as if it is typing.

Enter in any series, watch it write at your own pace, then leave a space for what you write, and start a new sentence regardless of the number of strings you specify.

How to make use of it:

Installation:

# Yarn
$ yarn add typed.js

# NPM
$ npm install typed.js --save

# Bower
$ bower install typed.js

Download and insert the typed.js JavaScript library into the HTML web page.

<script src="typed.min.js"></script>

Define an array of strings to sort within the web page.

var typed = new Typed(".element", {
    strings: ["String 1", "&amp; String 2", ...]
});

You are additionally allowed to sort the text outlined within 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 choices.

/**
 * @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 capabilities.

/**
 * 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) {}

Highly Configurable Text Typing Library, Typed.js Plugin/Github

See Demo And Download

Demo
Download

Official Website(mattboldt): Click Here

This superior jQuery/javascript plugin is developed by mattboldt. For extra Advanced Usages, please go to the official website.

Leave a Comment