Print Text Line By Line With A Typing Animation - typeWriter
| File Size: | 3.07 KB |
|---|---|
| Views Total: | 2691 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A bare-bones jQuery plugin to simulate the typewriter effect that prints an array of strings line by line with a typing animation.
How to use it:
1. Download and place the JavaScript file jquery.hugo-decoded.typewriter.min.js script after jQuery library.
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
crossorigin="anonymous">
</script>
<script src="jquery.hugo-decoded.typewriter.min.js"></script>
2. Create a container element in which you want to print the text.
<div id="typewriter"></div>
3. Call the function on the container element and define an array of text you want to print.
$(function(){
$('#typewriter').typewrite( {
text: [
"This is line 1",
"This is line 2",
"This is line 3",
"This is line 4",
"This is line 5"
]
);
});
4. Change the default typing speed.
$(function(){
$('#typewriter').typewrite( {
text: [
"This is line 1",
"This is line 2",
"This is line 3",
"This is line 4",
"This is line 5"
],
speed: 100 // in ms
);
});
This awesome jQuery plugin is developed by hugo-decoded. For more Advanced Usages, please check the demo page or visit the official website.











