Typewriter Effect

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.

Blog

Daniel Hintz

Join Our Newsletter. No Spam, Only the good stuff.

Related