Typing Text Animation Using HTML and CSS (Source Code)

Hello there, Coders. We'll make a Typing Text Animation Using Html and Css in this article. A Typing Text Animation is a good practice project for web development, especially for beginners.

We will create a stunning responsive Typing Text Animation website using HTML and CSS. which will assist you in learning the various text styles available through CSS. You should be able to create your own text-typing effect by the end of this article.

I hope you must have got an idea about the project.

So, Let’s Begin Text typing Animation Project By Adding The Source Codes. For That, First, We Are Using The Html Code.

Step1: HTML code for Text Typing Animation

HTML is Hyper Text Markup Language which provides a structure to our webpage .

ALL HTML document start With <!doctype HTML> which helps the browser to understand the our code follows the latest HTML version.

HTML document itself begin with and ends with

The main tag is

where we will be writing all our content which later on displayed on the browser .

Now we will look at our HTML code.

<!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">
    <title>Typing Text Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Typing Animation </h1>
    <div class="typing-text">Code With Random</div>

</body>
</html>

First, we'll make an H1 tag that contains the main heading of our website.
Now we create one div tag with a class (tpying-text) on which we will be adding our style for text animation

Now we'll examine the structure in the browser window to see how it appears without any styling.

So we have added the HTML tags and Their contents, Now it’s time to make it attractive by adding the CSS code.

Step2: CSS code for Text Typing Animation

Cascading Style Sheets (CSS) is a markup language for describing the presentation of a document written in HTML or XML. CSS, like HTML and JavaScript, is a key component of the World Wide Web.

Now we will look at our CSS code

/* Please this if you like it! */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap');

* {
  outline: none;
  box-sizing: border-box;
}

body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
  background-color: steelblue;
  color: white;
  font-family: 'Roboto Slab', serif;
  font-weight: 300;
  background-image: url("https://images.pexels.com/photos/673857/pexels-photo-673857.jpeg?auto=compress&cs=tinysrgb&h=1280&w=1920"); /* Photo by Irina Iriser from Pexels */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
}

h1 {
  font-size: 3vw;
}

.typing-text {
  width: 20ch;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-size: 6vw;
  animation: typing 2s steps(18) infinite alternate,
    blink 0.4s step-end infinite alternate;
  text-shadow: 0px 0px 3px white;
}

@keyframes typing {
  from {
    width: 0;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

@media (max-width: 767px) {
  h1 {
    font-size: 4vw;
  }
  .typing-text {
    font-size: 8vw;
  }
}

We imported Google Fonts in the first step of our CSS, which we will use to style our text. The outline value is set to zero and the box-sizing is set to border-box.

In the body section, we set the margin value to zero and the display as flex option, which helps in making the content responsive. We also set the text alignment to center and the background as an image (here image is used from pexels.com for tutorial purpose).

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap');

* {
  outline: none;
  box-sizing: border-box;
}

body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
  background-color: steelblue;
  color: white;
  font-family: 'Roboto Slab', serif;
  font-weight: 300;
  background-image: url("https://images.pexels.com/photos/673857/pexels-photo-673857.jpeg?auto=compress&cs=tinysrgb&h=1280&w=1920"); /* Photo by Irina Iriser from Pexels */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
}

Now the element H1 is selected and we defined font size as 3vw(vw-viewport).

h1 {
  font-size: 3vw;
}

Now using class selector we define the width 20ch and overflow is defined as hidden , right side of border with width of defined as (3px) and font size as (6vw). Animation with 2s of delay will run infinitely.

.typing-text {
  width: 20ch;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-size: 6vw;
  animation: typing 2s steps(18) infinite alternate,
    blink 0.4s step-end infinite alternate;
  text-shadow: 0px 0px 3px white;
}

@keyframes typing {
  from {
    width: 0;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

Media query with maximum width defined if the view port width is greater the max width h1 font size increases by one and class selector font size increases by two.

@media (max-width: 767px) {
  h1 {
    font-size: 4vw;
  }
  .typing-text {
    font-size: 8vw;
  }
}

Now We have Successfully created our Typing Text Animation. You can use this project for your personal porfolio and WE hope you understood the project , If you any doubt feel free to comment!!]

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written by : Arun

Code by : Santosh Singh Chauhan

Blog

Typing Text Animation Using HTML and CSS (Source Code)

Codewithrandom Blogs

Step1: HTML code for Text Typing Animation

Step2: CSS code for Text Typing Animation

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

Related