Native Typed
A tiny dependency free JavaScript library javascript library for typing animation.
- 1.77 kB gzipped of minified version ⚡️
- Dependency-free 🎉
- IE9+ ✔️
document strings: 'vue' 'react' 'angular' typeSpeed: 30 deleteSpeed: 15 loop: true;
Getting Started
Step 1: Install
Download the latest release or install with npm.
npm install native-typed --save
Step 2: Reference
If you linked native-typed
directly in your HTML, you can use window.NTyped
. If you're using a module bundler, you'll need to import it.
// CommonJSlet NTyped = ; // ES2015;
Options
You can set options on native-typed
during initialization.
// During initializedocument strings: 'vue' 'react' 'angular' typeSpeed: 30 deleteSpeed: 15 loop: true;
options.strings
The array of strings to display in typing animation.
Default: (array)
['This is a typing animation!', 'You can also add your own sentences', 'So go do it!']
options.stringType
Determines whether provides strings are using HTML or not. You can choose between
NTyped.Types.HTML
andNTyped.Types.TEXT
.Default: (enum)
NTyped.Types.HTML
options.loop
Make animation loop.
Default: (boolean)
true
options.showCursor
Show cursor.
Default: (boolean)
true
options.cursorChar
If cursor is enabled through options, show this character.
Default: (string)
|
options.startDelay
Time delay in milliseconds before typing writing animation starts initially.
Default: (int)
500
options.backDelay
Time delay in milliseconds before deleting characters after typing them out.
Default: (int)
500
options.typeSpeed
The speed of typing characters in milliseconds.
Default: (int)
0
options.deleteSpeed
The speed of deleting characters in milliseconds.
Default: (int)
0
options.classes.cursor
Classname for cursor element.
Default: (sring)
title__cursor
To have the cursor effect, please add following CSS to your stylesheet.
@50%100%}
Contributions & Issues
Contributions are welcome. Please clearly explain the purpose of the PR and follow the current style.
Issues can be resolved quickest if they are descriptive and include both a reduced test case and a set of steps to reproduce.
Licence
Licensed under the MIT License © 2016 Genert Org
Extra
Inspired by Typed.js