File Size: 5826KB
Total Views: 13419
Date Created:
Last Modified Date:
Official Website: Go to website
License: MIT
Typed.js is a JavaScript library that provides the experience of animated typing letters. It has various options to modify it’s features(shuffle, loop, loopCount, cursorChar and many more) accordingly.
Features:
- Supports
npm,yarnandbower. - You can customize typing speed as you need.
- You can controll the loopCount also.
- It can be played within loop.
- Supports backSpeed and smartBackspace.
Install with npm
npm install typed.jsInstall with yarn
yarn add typed.jsInstall with bower
bower install typed.jsHow to use it:
1. Load the required JavaScript resource typed.js in the HTML page.
<script src="path/typed.js"></script>OR from CDN
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>2. Add basic SEO friendly html structure to the page.
<div id="typed-strings">
<p>Typed.js is a <strong>JavaScript</strong> library.</p>
<p>It <em>types</em> out sentences.</p>
</div>
<span id="typed"></span>3. Initialized the stringsElement to respective ID #typed
<script>
var typed = new Typed('#typed', {
stringsElement: '#typed-strings'
});
</script>Use it with “strings”
1. Just add a span to the page with a class named element
<span class="element"></span>2. Initialized strings to respective class named .element
var options = {
strings: ["<i>First</i> sentence.", "& a second sentence."],
typeSpeed: 40,
loop: true,
}
var typed = new Typed(".element", options);Plugin’s default configuration options:
{
strings:[],
stringsElement: null,
typeSpeed: 0,
startDelay: 0,
backSpeed: 0,
smartBackspace: true,
shuffle: false,
backDelay: 700,
fadeOut: false,
fadeOutClass: 'typed-fade-out',
fadeOutDelay: 500,
loop: false,
loopCount: Infinity,
showCursor: true,
cursorChar: '|',
autoInsertCss: true,
attr: null,
bindInputFocusEvents: false,
contentType: 'html'
}Find detail configuration options from the main document.
Plugin’s Options:
| Name | Default | Type | Description |
|---|---|---|---|
| strings | null |
array | strings – strings to be typed |
| stringsElement | null |
string | stringsElement – ID of element containing string children |
| typeSpeed | 0 |
number | typeSpeed – type speed in milliseconds |
| startDelay | 0 |
number | startDelay – time before typing starts in milliseconds |
| backSpeed | 0 |
number | backSpeed – backspacing speed in milliseconds |
| smartBackspace | true |
boolean | smartBackspace – only backspace what doesn’t match the previous string |
| shuffle | false |
boolean | shuffle – shuffle the strings |
| backDelay | 700 |
number | backDelay – time before backspacing in milliseconds |
| fadeOut | false |
boolean | fadeOut – Fade out instead of backspace |
| fadeOutClass | 'typed-fade-out' |
string | fadeOutClass – css class for fade animation |
| fadeOutDelay | 500 |
boolean | fadeOutDelay – Fade out delay in milliseconds |
| loop | false |
boolean | loop – loop strings |
| loopCount | Infinity |
number | loopCount – amount of loops |
| showCursor | true |
boolean | showCursor – show cursor |
| cursorChar | '|' |
string | cursorChar – character for cursor |
| autoInsertCss | true |
boolean | autoInsertCss – insert CSS for cursor and fadeOut into HTML <head></head> |
| attr | null |
string | attr – attribute for typing |
| bindInputFocusEvents | false |
boolean | bindInputFocusEvents – bind to focus and blur if el is text input |
| contentType | html |
string | contentType – ‘html’ or ‘null’ for plaintext |
