Creating a typewriter effect is very simple. If you are using a pure English environment, you can easily achieve the typewriter effect based on the ch unit and a monospace font. However, the effect achieved this way is certainly limited. Let's take a look at the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typewriter Effect</title>
<style>
.typewriter {
display: inline-block;
font-family: monospace;
white-space: nowrap;
overflow: hidden;
border-right: 2px solid black; /* Simulate cursor */
width: 20ch; /* Width of text display */
animation: typing 3.5s steps(5) 1s forwards, blink 0.75s step-end infinite;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 20ch;
}
}
@keyframes blink {
from, to {
border-color: transparent;
}
50% {
border-color: black;
}
}
</style>
</head>
<body>
<div class="typewriter">Typewriter Effect</div>
</body>
</html>
With a simple step animation, you can easily create a typewriter effect. So where does the problem arise?
-
chis the width of the "0" in the font file. If you adjust the letter spacing, it will fail. Also, since it is the width of "0", it generally only handles Latin characters. For non-Latin characters like Chinese, it cannot be perfectly supported due to different widths. -
You need to manually specify the number of
stepsbased on the length of the text being typed. -
When modifying the text, you must also modify the
cssfile. -
When the text is translated by a translation plugin, it will also fail.
Due to the numerous issues with the pure css solution, we will certainly think of using js to solve this problem.
We can use some pre-written typewriter libraries to achieve a refined typewriter effect.
For example: https://github.com/tameemsafi/typewriterjs
This library offers rich functionality; it can even provide text splitting tags and handle multiple texts with different animations.
Chaining calls is also very intuitive.
var app = document.getElementById('app');
var typewriter = new Typewriter(app, {
loop: true,
delay: 75,
});
typewriter
.pauseFor(2500)
.typeString('A simple yet powerful native javascript')
.pauseFor(300)
.deleteChars(10)
.typeString('<strong>JS</strong> plugin for a cool typewriter effect and ')
.typeString('<strong>only <span style="color: #27ae60;">5kb</span> Gzipped!</strong>')
.pauseFor(1000)
.start();
If you are still not satisfied with such a simple typewriter effect and want to play with the text in more ways, you will need to use gsap, which is basically the most powerful animation library in the world.
With its splitText feature, you can have finer control over text splitting animations, not just limited to typewriter animations.