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 become ineffective. 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 typing. -
When modifying the text, you must also modify the
cssfile. -
When the text is translated by a translation plugin, it will also become ineffective.
Due to the many 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 provides rich functionality; it can even split text 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 more precise control over text splitting animations, not just limited to typewriter animations.