a simple typewriter effect in javascript supporting nested tags for styling
typewriter_speed
default speed, in use when no argument is passed
lower is faster, higher is slower
default value for blinker, in use when no argument is passed
typewriter_blinker
true show the blinker
false hide the blinker
typewriter_class
all html elements with that specific class are automatically typewrited on script start
For CSS add to <HEAD>:
<link rel="stylesheet" type="text/css" href="typewriter.css">For JS add to <BODY>:
<script src="typewriter.js" defer></script>Then place some html elements in your page (i reccomend using <div> or <p>)
set the newly created element class as defined in typewriter_class (default: typewriter)
<p class="typewriter">Hello World! I'm a <i>typewrited</i> text</p>Tip: It is also possible to used nested html tags for styling (<b>, <u>, <i>, etc.)
For custom execution there is a typeWriterById function:
typeWriterById(id, txt = null, speed = typewriter_speed, blinker = typewriter_blinker
-
id [string]: html element
id -
txt [string]: (optional) text to type, if
nullor not set, content from HTML is used, default:null -
speed [integer]: (optional) typing speed, lower is faster, higher is slower, default: as defined in
typewriter_speed -
blinker [bool]: (optional) show cursor blinker, default: as defined in
typewriter_blinker
Example:
<p id="typewriteme">Hello world</p>typeWriterById('typewriteme');will type Hello world into typewriteme element at default speed
typeWriterById('typewriteme', "Hi everyone", 50, false);will type Hi everyone into typewriteme element, at speed 50, hiding blinker
Take a look at demo.html if you need some reference