I've got this idea for my portfolio site where my name gets typed out when the page loads. It's going to get fancy, but to start out, I just want to just get the typing effect figured out. Luckily, I found a library called Typed.js which is really simple, and looks really great!
I was just messing around, so for now I'm just using vanilla JavaScript. So I started by creating a simple html doc and including the CDN script:
<head>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
<title>Typing Effect</title>
</head>
<body>
<h2>
<span id="typed"><!-- content will be typed here --></span>
</h2>
</body>
The simplest way to go is to create a script tag and add the strings you'd like to cycle through as an array.
<script>
const typed = new Typed('.element', {
strings: ['This effect is super cool!', "I'm going to use it.", 'All the time!'],
typeSpeed: 40
};
</script>
And boom, already up and running!
But I wanted to get a little bit more complex and customized. I want my html to determine what should be typed, not my JavaScript. At first I thought I would use an html data-attribute, but then I saw that I don't even have to do that, I can write it as regular html, including style tags, and then Typed.js can pick it up and use it directly by setting the stringsElement option. I also plan on adding more advanced stuff, so I've broken it out onto it's own script.js file just to get it out of my html.
// html
<h2>
<div id="typed-strings">
<p>This effect is <mark><em>super</mark></em> cool!</p>
<p>I'm going to use it.</p>
<p>For pretty much everything</p>
</div>
<span id="typed"><!-- content will be typed here --></span>
</h2>
// JavaScript
const typed = new Typed('#typed', {
stringsElement: '#typed-strings',
typeSpeed: 40
});
Then, playing around with its other features, I landed on these options. I slowed it down a little, added a delay before the text gets deleted, and changed the cursor to an underscore to simulate a terminal. To make the terminal effect pop, I also customized the cursor element with CSS. I also wanted it to repeat 3 times, so I added the loop and loopCount options as well.
// JS
const typed = new Typed('#typed', {
stringsElement: '#typed-strings',
typeSpeed: 40,
backDelay: 1000,
loop: true,
loopCount: 3,
cursorChar: '_'
});
// css
.typed-cursor {
font-weight: 900;
box-shadow: 0px 1px;
font-size: 1.3em;
}
And there I have it, in just a few minutes of messing around I had a perfect typing effect.
Next step will be to get really customized, including placement and variable colors, but that's a project for next week.
Top comments (1)
Playing around with new libraries is a great time 😄