Typewriter Effect using HTML, CSS and JavaScript
Preview Live Preview Download Download Code

Typewriter Effect using HTML, CSS and JavaScript

The typewriter effect is an amazing-looking effect that mimics typing of characters on a typewriter. It gives you an awesome way to highlight some text that you want users to focus on and the red blinking cursor will even help you with that. In this tutorial, we will learn how to create a typewriter effect using HTML, CSS, and JavaScript. It's really easy and quick so let's start coding!

Step 1: Setting up the HTML code for typewriter text effect

There is nothing fancy about HTML here, we are going to start by generating a boilerplate (if you are using Visual Studio Code just press "!" and enter - voila, you got this!). Then a quick change of title and linking style.css in the head section, so we will be able to make the typewriter effect pleasing to the eye. Inside the body element, we will have an H1 tag with a class name of a "typewriter" - that's the place where we will put the typing effect later on. At the very bottom of the body, we will also have a script tag linking to our empty JavaScript file - we will fill it with the magic in just a moment.

Below is the HTML code for typewriter effect we just wrote - feel free to copy and paste it into your index.html file: 

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Typewriter Effect HTML CSS JavaScript</title>
  </head>
  <body>
    <main>
      <h1 class="typewriter"></h1>
    </main>
    <script src="main.js"></script>
  </body>
</html>

Step 2: Styling the typing animation with CSS

Now it's time to fill our style.css with some code. At first, we will import a nice-looking font from Google fonts - let's choose Open Sans. We will also reset padding, margin and change box-sizing to border-box, so it will be easier to style everything. Since our H1 tag is placed directly in the "main" element we will use it as a container - we will center content using Grid and slightly change the background as well as the text color. 

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@700&display=swap');
  
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Open Sans", sans-serif;
}

main {
  height: 100vh;
  display: grid;
  place-content: center;
  background: #f7f7ff;
  color: #040303;
}

Finally the most important - styling the typewriter class! We are going to increase the font size to 4rem and font weight to 700 (or simply bold). If it comes to a cursor we will add a right border and make it a solid 4 pixels width reddish line, we will also move it slightly from the text itself by using padding-right. Lastly, we are going to add a cool-looking blinking effect - the CSS animation property will help us with that. We will create a simple infinite animation called 'blink', it will take 0.75s to make one cycle (you can of course change it to make blinking slower or faster). By using "keyframe" rule we can make the actual blinking effect by changing the color of the border to transparent in the middle of the animation. 

.typewriter {
  font-size: 4rem;
  font-weight: 700;

  /* Typewriter blink animation */
  border-right: 4px solid #ff312e;
  padding-right: 8px;
  animation: blink 0.75s infinite;
}

@keyframes blink {
  50% {
    border-right: 4px solid transparent;
  }
}

Check out how finished CSS code for typing animation code looks like: 

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Open Sans", sans-serif;
}

main {
  height: 100vh;
  display: grid;
  place-content: center;
  background: #f7f7ff;
  color: #040303;
}

.typewriter {
  font-size: 4rem;
  font-weight: 700;

  /* Typewriter blink animation */
  border-right: 4px solid #ff312e;
  padding-right: 8px;
  animation: blink 0.75s infinite;
}

@keyframes blink {
  50% {
    border-right: 4px solid transparent;
  }
}

Step 3: Adding JavaScript code to create a typing effect

At first we will set up a couple of variables:

  • textData - an array with words we are going to use;
  • currentWord - a current word we are using;
  • text - a text our function will generate;
  • count - will help us to know if we are using first or second word from our array;
  • index - an index of the letter;
  • speed - a speed which will be used to add new letters (lower - faster and vice versa);
  • isDeleting - help us to determine if the text is going into delete mode; 
const textData = ["Typewriter Effect", "Tutorial"];
let currentWord = "";
let text = "";
let count = 0;
let index = 0;
let speed = 400;
let isDeleting = false;

Now it's time to create a function - we are going to use IIFE (a special kind of function that is run as soon as it's defined) for that purpose. Let's call it 'type'. 

(type = () => {
  ...
 })();

Inside of it firstly we are going to check out if we should get back to the first word after going through the array of the content we are going to 'type'. 

if (count === textData.length) {
  count = 0;
}

currentWord = textData[count];

Then let's check whether we are currently in deletion mode and if not, we are going to add one letter to our text variable by using slice method on currentWord (it's a '"Typewriter Effect" in our example) string. A start position is zero while the end is the current letter index plus one (so it will actually add one letter to our text). We also have to check if we finished typing our word and get into deletion mode if necessary. In the deletion mode, we are going to slightly lower the speed (this will actually make the removing letters a bit faster) and remove one letter from the text - we are going to use a slice method as well, with a start position of 0 and end position of a current letter index minus one. After making our text an empty string we have to move to the next word, therefore we will increase the count, change isDeleting to false, and get speed into default (we are using 400). 

if (!isDeleting) {
  text = currentWord.slice(0, ++index);

  if (text.length === currentWord.length) {
    isDeleting = true;
  }
} else {
  speed = 150;
  text = currentWord.slice(0, --index);

  if (text.length === 0) {
    isDeleting = false;
    count++;
    speed = 400;
  }
}

Our function is pretty much done, but we need to add two more things.

First, we have to actually put our text into HTML and for that, we are going to use textContent property on the typewriter class we created earlier. The value of textConent is our 'text' variable of course. 

document.querySelector(".typewriter").textContent = text;

Second, we are going to loop our function infinitely by using setTimeout method which will execute our "type" function just after waiting some time - since we used 400 it will wait every 400 ms to add a new letter to our word and 150 ms to delete one. 

setTimeout(() => type(), speed);

Our finished typewriter effect JavaScript code should look like this, simply copy and paste it into main.js 

const textData = ["Typewriter Effect", "Tutorial"];
let currentWord = "";
let text = "";
let count = 0;
let index = 0;
let speed = 400;
let isDeleting = false;

(type = () => {
  if (count === textData.length) {
    count = 0;
  }

  currentWord = textData[count];

  if (!isDeleting) {
    text = currentWord.slice(0, ++index);

    if (text.length === currentWord.length) {
      isDeleting = true;
    }
  } else {
    speed = 150;
    text = currentWord.slice(0, --index);

    if (text.length === 0) {
      isDeleting = false;
      count++;
      speed = 400;
    }
  }

  document.querySelector(".typewriter").textContent = text;

  setTimeout(() => type(), speed);
})();

Conclusion - Text Typing Animation to impress visitors

And that's it! We created an awesome typewriter effect using HTML, CSS, and JavaScript together, I am more than sure that your website visitors will love it. Of course, you can edit the code to change the design, text, or even speed of typing to make it fully fit your style - with a little creativity, the possibilities are endless!