Text Typing Animation On Website Using HTML & CSS

Hello readers, Today In this article I am going to show you how to create Auto Typing Text Animation Effects Using HTML & CSS. This type of Auto Typing Effect is used on the website for the Typing Effect Design.

You easily create these Text Typing Animation Effects Using HTML & CSS then this article will definitely help you. For this, you need to have an idea about basic HTML & CSS then you can understand the following codes. It is designed in a completely modern way.

Some Information About This Text Typing Animation Effects

There have shown normal text with auto typing text. Auto typing text also changes. Auto typing text color also changes for good looking.

Watch the video tutorial to create Text Typing Animation Effects

If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made this Auto Typing Text Animation Effects step by step completely beautifully. So you can learn how to make these Text Typing Animation Effects. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.

Hopefully, the above video tutorial has helped you to create this Auto Typing Text Effect Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.

You might like this:

Auto Typing Text Effect | Source Codes

I need a JavaScript Typing Animation Library (typed.js) to create this Auto Typing Text Effects. To make this plugin work add CDN link. And also add JS code below in HTML File.

You have to create an HTML & CSS File For this Text Typing Animation Effect. After creating these files just paste the following codes into your file.

The First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension. You’ve to download files from the given download button to use.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Text Typing Animation</title>
    <!----CSS link----->
    <link rel="stylesheet" href="style.css"> 
</head>
<body>

    <div class="container">
        <h1>I'm <span class="auto-type"></span></h1>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script>
        var typed = new Typed(".auto-type", {
            strings: ["Coding"],
            typeSpeed: 150,
            backSpeed: 150,
            loop: true
        })
    </script>

</body>
</html>

Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

CSS CODE:

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.container{
  width: 100%;
  height: 100vh;
  background: #2b323c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container h1{
  font-size: 80px;
  font-weight: 600;
}
span{
  color: #fff724;
}

now you’ve successfully created these Auto Typing Text Animation Effect Using HTML & CSS. If your code does not work or facing any error/problem comment down or contact us through the contact page.

Related Articles

1 COMMENT

  1. Nice post. I learn something more challenging on different blogs everyday. It will always be stimulating to read content from other writers and practice a little something from their store. I’d prefer to use some with the content on my blog whether you don’t mind. Natually I’ll give you a link on your web blog. Thanks for sharing.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Categories