- Requirements: No custom library needed
- Lightweight: ~2.6KB (minified,
ES6version) - Easy Integration: No automatic execution, just init the script when needed. When
reload()method is called, TyperJS also includes all newly created elements. - Wide browser support: All browser including IE8 (
standardversion), All modern browser supporting ECMAScript 2015 (ES6version) - Easy Initialization: The script can be initialized with minimal options
TyperJS comes in two variants:
- The
ES6 version:- It's made with pure ES6 syntax using classes and arrow functions
- It's very light (~2.6KB when minified)
- Limited browser support. Check compatibility
- Work perfectly with Node and Babel.
- The
normal version:- It's made with pure javascript functions
- It's ight (~4KB when minified)
- Wide browser support. (including IE8)
- Perfect for all frontend applications
TyperJS can be installed by including the js file at the end of the <body> tag of your website.
The ES6 version:
<script src="/path/to/js/typer.es6.min.js" type="text/javascript" ></script>The normal version:
<script src="/path/to/js/typer.min.js" type="text/javascript" ></script>Example:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
<script src="/path/to/js/typer.min.js" type="text/javascript" ></script>
</body>
</html>Because TyperJS doesn't need aditional libraries like jQuery to run, you can execute the script asynchronously or you can defer the loading for a faster page parsing
Please refer to the Examples for detailed usage information.
var typer = new Typer({
elem:'.typer-container',//it can be any css selector
typeText:'A bunch of text here'
});The elem and typeText options are required. If one of them is missing the script will throw an error and the execution will be stopped.
For more informations go to options section
The script must be initialized with an empty element. TyperJS automatically removes any content from the given elements and creates two span elements.
First span contains the text itself.
Second span contains the cursor/line.
Example of generated code:
<div class="typer-element">
<span>Text goes here</span>
<span>|</span>
</div>Because TyperJS doesn't add any css to the element (except the opacity for the cursor) feel free to add your own css. An example can be found below
/*:first-child selects only the text*/
.typer-element:first-child{
font-family:'Verdana';
color:#1f5a6b
}
/*:first-child selects the cursor/line*/
.typer-element:last-child{
color:grey;
}Options are properties given to the TyperJS function as an object. elem and typeText are the only required options. There are also a bunch of optional options.
- Type:
string - Default:
null - Required:
yes - The string should contain an valid
cssselector
-
Type:
stringorarray -
Default:
null -
Required:
yes -
This option must contain a
stringor anarraywith the text used for typing. The texts will be typed one by one//option with string typeText:"A bunch of text here", //or with array typeText:["Text number one", "Text number two"],
- Type:
number - Default:
0 - Options:
0: infinite> 0: number of repeats
- The
repeatoption tells how many times to retype the text or texts. IftypeTextcontains an array, the repeat value is for the entire array, not for each element.
- Type:
number - Default:
100 - Options:
0: will throw anerror> 0: time between letters
- The
intervaloption tells the time inmsbetween letters/keyPress. If the option is0the script will throw an error because of division by0. We tested that thedefaultvalue fits the best in any project
- Type:
number - Default:
0 - Options:
0: no delay after text> 0: delay
- The
delayoption tells the delay before text removal. We tested that2000is the best value for a perfect animation
- Type:
boolean - Default:
true - Options:
true: show cursor/linefalse: don't show cursor/line
- This option shows or hides the typing line.
- Type:
boolean - Default:
false - Options:
true: text will be removedfalse: text will not be removed
- This option removes(or not) the text after the repeat cycles are over. This is not aplicabile to
repeat:0
- Type:
boolean - Default:
true - Options:
true: hide linefalse: show line
- This option removes(or not) the typing line/cursor after the repeat cycles are over. This is not aplicabile to
repeat:0
- Type:
boolean - Default:
false - Options:
true: enable debug commandsfalse: disable debug commands
- This option if only for developers. When enabled it should print in the console all warnings and all errors.
Example with all options mixed together:
var typer = new Typer({
elem:'.typer-container',
typeText:["First text", "Second text"],
debug: false,
repeat: 2,
interval: 50,
delay: 2000,
typingLine: true,
deleteOnFinish: true,
hideLineOnFinish: true
});Methods are functions you can call on the TyperJS element after initialization
This method stops the typer and can be continued with play() method.
This method continue the typer.
This method reloads the entire TyperJS object. If you want to change the initial options of the object you can pass to the function a new object containing all the new options. When reload() is called, TyperJS also parse all new elements added after first execution.
reload() example:
var typer = new Typer({
elem:'.typer-container',
typeText:["First text", "Second text"],
debug: false,
repeat: 2,
interval: 50,
delay: 2000,
typingLine: true,
deleteOnFinish: true,
hideLineOnFinish: true
});
var newOptions = {
interval: 100,
delay:0
};
typer.reload(newOptions); //in this case the script is reloaded and only interval and delay options are changedThis method destroy the typer.
WARNING: This method DON'T destroy the typer itself, it only destroy the interval and the variables attached to the typer.
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Opera (latest)
- Edge (latest)
- Internet Explorer 8+
Open source under MIT license
Created with by Emanuel Mustea