Meet Typed.js — A JavaScript Typing Animation Library
Use this cool animation library for your next JavaScript project.
Typed.js is a JavaScript animation library. Any string can type customer animated with content, speed, and so on. The most common use as I notice is for a landing page that looks modern in style.
Official site:
Step1:
import js library with npm, yarn, bower, or CDN
npm install typed.js
yarn add typed.js
bower install typed.jsor
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>Step2:
HTML
The content is included in the <div>
The place content actually is typing is the <span>
Step3:
JS
fire up the library with new Typed('id',options)
Customization:
stringsElement: the content want to show
typeSpeed: the speed of typing
backDelay:backDelay time before backspacing in milliseconds
fadeOut: fade out animation instead of backspacing
fadeOutClass: can set the unique class in CSS
fadeOutDelay: the animation-delay time
loop: loop the animation ,default false
loopCount: selected number or infinity
showCursor: the cursor show or not
cursorChar: customize cursor default is |
and with some events
All customization in the document:
var typed = new Typed('.element', {
/**
* @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',
/**
* Before it begins typing
* @param {Typed} self
*/
onBegin: (self) => {},
/**
* All typing is complete
* @param {Typed} self
*/
onComplete: (self) => {},
/**
* Before each string is typed
* @param {number} arrayPos
* @param {Typed} self
*/
preStringTyped: (arrayPos, self) => {},
/**
* After each string is typed
* @param {number} arrayPos
* @param {Typed} self
*/
onStringTyped: (arrayPos, self) => {},
/**
* During looping, after last string is typed
* @param {Typed} self
*/
onLastStringBackspaced: (self) => {},
/**
* Typing has been stopped
* @param {number} arrayPos
* @param {Typed} self
*/
onTypingPaused: (arrayPos, self) => {},
/**
* Typing has been started after being stopped
* @param {number} arrayPos
* @param {Typed} self
*/
onTypingResumed: (arrayPos, self) => {},
/**
* After reset
* @param {Typed} self
*/
onReset: (self) => {},
/**
* After stop
* @param {number} arrayPos
* @param {Typed} self
*/
onStop: (arrayPos, self) => {},
/**
* After start
* @param {number} arrayPos
* @param {Typed} self
*/
onStart: (arrayPos, self) => {},
/**
* After destroy
* @param {Typed} self
*/
onDestroy: (self) => {}
});My demo is below:
👉Follow me for more useful web development content! love sharing🥰
