DEV Community

loading...
Cover image for Typewriter Effect

Typewriter Effect

Daniel Hintz
Junior full-stack developer with focus in JavaScript (ES6) and Ruby. Experience with React, Redux, Rails, among others.
・2 min read

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

And boom, already up and running!

Simple Typing Effect

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
});
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

And there I have it, in just a few minutes of messing around I had a perfect typing effect.

Full Typing Effect

Next step will be to get really customized, including placement and variable colors, but that's a project for next week.

Discussion (1)

Collapse
dhintz89 profile image
Daniel Hintz Author

Playing around with new libraries is a great time 😄