In this tutorial we will see how to create a typing effect using JavaScript and CSS3. A typing effect is eye catching therefore visitors will surely read whats being typed. This can be used for to convey important messages. Even speech to text web apps use this effect.
Using TheaterJS
We will use TheaterJS library to create such kind of effect.
Here is sample code on how to load this library and initialise it.
<script src="https://cdn.rawgit.com/Zhouzi/TheaterJS/gh-pages/build/theater.min.js"></script>
<script type="text/javascript">
//create an theater object
var theater = new TheaterJS();
//provide an slug/id for a pice for text in first parameter and an id of an HTML element inside which you want typing effect.
theater.describe("text", {speed: .7, accuracy: .9}, "#text");
//now call write function with the slug and text to write separated with an colon.
theater.write("text:QNimate, Narayan's Blog", 600);
</script>
<script type="text/javascript">
//create an theater object
var theater = new TheaterJS();
//provide an slug/id for a pice for text in first parameter and an id of an HTML element inside which you want typing effect.
theater.describe("text", {speed: .7, accuracy: .9}, "#text");
//now call write function with the slug and text to write separated with an colon.
theater.write("text:QNimate, Narayan's Blog", 600);
</script>
Complete Example
Here is an complete example of an typing effect with an blinking character. We made the blinking character using CSS3 keyframe animations and psuedo-element.
<!doctype html>
<html>
<head>
<title>Theater JS Demo</title>
<style type="text/css">
#text:after
{
content: "";
display: inline-block;
height: 1em;
width: 3px;
background-color: #333333;
margin-left: 2px;
font-weight: normal;
position: relative;
top: 4px;
-webkit-animation: blinker steps(1) 1s infinite;
-o-animation: blinker steps(1) 1s infinite;
-moz-animation: blinker steps(1) 1s infinite;
animation: blinker steps(1) 1s infinite;
}
@-webkit-keyframes blinker {
0% { visibility: visible; }
50% { visibility: hidden; }
100% { visibility: visible; }
}
@-moz-keyframes blinker {
0% { visibility: visible; }
50% { visibility: hidden; }
100% { visibility: visible; }
}
@-o-keyframes blinker {
0% { visibility: visible; }
50% { visibility: hidden; }
100% { visibility: visible; }
}
@keyframes blinker {
0% { visibility: visible; }
50% { visibility: hidden; }
100% { visibility: visible; }
}
</style>
</head>
<body>
<h1 id="text"><noscript>QNimate, Narayan's Blog</noscript></h1>
<script src="https://cdn.rawgit.com/Zhouzi/TheaterJS/gh-pages/build/theater.min.js"></script>
<script type="text/javascript">
var theater = new TheaterJS();
theater.describe("text", {speed: .7, accuracy: .9}, "#text");
theater.write("text:QNimate, Narayan's Blog", 600);
</script>
</body>
</html>
<html>
<head>
<title>Theater JS Demo</title>
<style type="text/css">
#text:after
{
content: "";
display: inline-block;
height: 1em;
width: 3px;
background-color: #333333;
margin-left: 2px;
font-weight: normal;
position: relative;
top: 4px;
-webkit-animation: blinker steps(1) 1s infinite;
-o-animation: blinker steps(1) 1s infinite;
-moz-animation: blinker steps(1) 1s infinite;
animation: blinker steps(1) 1s infinite;
}
@-webkit-keyframes blinker {
0% { visibility: visible; }
50% { visibility: hidden; }
100% { visibility: visible; }
}
@-moz-keyframes blinker {
0% { visibility: visible; }
50% { visibility: hidden; }
100% { visibility: visible; }
}
@-o-keyframes blinker {
0% { visibility: visible; }
50% { visibility: hidden; }
100% { visibility: visible; }
}
@keyframes blinker {
0% { visibility: visible; }
50% { visibility: hidden; }
100% { visibility: visible; }
}
</style>
</head>
<body>
<h1 id="text"><noscript>QNimate, Narayan's Blog</noscript></h1>
<script src="https://cdn.rawgit.com/Zhouzi/TheaterJS/gh-pages/build/theater.min.js"></script>
<script type="text/javascript">
var theater = new TheaterJS();
theater.describe("text", {speed: .7, accuracy: .9}, "#text");
theater.write("text:QNimate, Narayan's Blog", 600);
</script>
</body>
</html>
