iTyped
Dead simple Animated typing, with no dependencies.
Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.
Why should you use iTyped?
- iTyped has a tiny size: 2.4kB
- No jQuery dependency
- Just install and enjoy!
At now, if you just need to render Strings, iTyped is the best solution for you.
Install
Npm: npm install ityped
CDN: https://unpkg.com/[email protected]
The Gist:
import { init } from 'ityped';
init(`#element`, {
// required - for now, only accepting texts
strings: ['Dead simple animated typing.', 'No dependencies'],
//optional
typeSpeed: 55, //default
//optional
backSpeed: 30, //default
//optional
startDelay: 500, //default
//optional
backDelay: 500, //default
//optional
loop: false, //default
//optional
showCursor: true, //default
//optional
cursorChar: "|", //default
// optional callback called once the last string has been typed
onFinished: function(){}
});Want the animated blinking cursor? Add this CSS and customize as you want!
.ityped-cursor {
font-size: 2.2rem;
opacity: 1;
-webkit-animation: blink 0.3s infinite;
-moz-animation: blink 0.3s infinite;
animation: blink 0.3s infinite;
animation-direction: alternate;
}
@keyframes blink {
100% {
opacity: 0;
}
}
@-webkit-keyframes blink {
100% {
opacity: 0;
}
}
@-moz-keyframes blink {
100% {
opacity: 0;
}
}API
Init
/**
* @name init
* @description Init the typed animation
* @param {String} element The Element that will receive the strings
* @param {Object} config The typed configuration
*/
init('#element', config);<span id="element"></span>iTyped Configuration
/**
* @name config
* @description The initial typed configuration
* @param {Array} strings An array with the strings that will be animated
* @param {Integer} typeSpeed Typing speed
* @param {Integer} backSpeed Backspacing speed
* @param {String} cursorChar The value of cursor character
* @param {Integer} backDelay Time before backspacing
* @param {Integer} startDelay Time before typing starts
* @param {Boolean} showCursor Show the cursor element
* @param {Boolean} loop The animation loop
* @param {Function} onFinished The callback that will be called (if `loop` is false) once the last word is decremented
**/
const config = {
strings: ['Dead simple animated typing.', 'No dependencies'],
//optional
typeSpeed: 100, //default
//optional
backSpeed: 50, //default
//optional
startDelay: 500, //default
//optional
backDelay: 500, //default
//optional
loop: false, //default
//optional
showCursor: true, //default
//optional
cursorChar: "|", //default
// optional callback called (if `loop` is false) once the
// last string was typed
onFinished: function(){},
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent