Typing Text Animation Using HTML and CSS
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.
10+ HTML CSS Projects For Beginners (Source Code)
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 <html> and ends with </html>
Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)
The main tag is <body> 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.
Restaurant Website Using HTML and CSS
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.
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
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).
ADVERTISEMENT
h1 {
font-size: 3vw;
}
ADVERTISEMENT
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.
ADVERTISEMENT
.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;
}
}
ADVERTISEMENT
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.
ADVERTISEMENT
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
@media (max-width: 767px) {
h1 {
font-size: 4vw;
}
.typing-text {
font-size: 8vw;
}
}
Ā Final Preview of Typing Text Animation Using CSS
Video Output Of Typing Text Animation Css
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!!]
50+ HTML, CSS & JavaScript Projects With Source Code
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.
what is Text Animation?
The phrase “text animation” refers to the process of animating letters, words, or paragraphs in computer graphics. It refers to the creation of text that moves across the screen, within a region, or by following a pattern of motion in animation.
What are the types of text added to an animation?
1. Parallax Scrolling
2. Fade In/ Out
3. Horizontal / Vertical scrolling text
