Hi Guys, I am back with another fantastic project in this project I used HTML, CSS, and a bit of JavaScript. This project is a Typing Text Animation Effect.
NOTE: If you want to stay up-to-date on my new and upcoming projects so please join our WhatsApp and Telegram community.
I also share a complete source code with my readers and followers it is free of cost, not any subscription to get the source code of this project. You can download these code files and use them as you want for free.
Recently I created a 3D flip profile card UI design using HTML and CSS. I also share this source code in the blog post here you can check this 3D flip profile card UI design.
Typing Text Animation
Typing text animation refers to a visual effect that simulates the appearance of text being typed out in real time. It is commonly used in various digital media, such as websites, presentations, videos, and advertisements, to add visual interest and engage viewers.
The animation typically starts with an empty text area or a blinking cursor, and then individual characters are progressively displayed as if someone is typing them.
This effect can mimic the speed and rhythm of actual typing, including pauses and delays between characters or words. It gives the impression that the text is being generated live, which can be visually appealing and create a sense of anticipation.
Typing text animations is achieved through coding techniques such as CSS (Cascading Style Sheets) or JavaScript. CSS animations can be used to control the timing and transition of the characters, while JavaScript can be employed to handle more complex interactions and dynamic effects.
These animations are often used to highlight key messages, introduce content sections, or create engaging headers and titles. They can be customized with different fonts, colors, and styles to match the overall design and branding of a website or presentation.
Overall, typing text animations serve as a visually dynamic way to present information and capture the attention of the audience.
About This Project
The Coding Pakistan blog website embarked on this project with a noble aim: to provide cost-free assistance to students who are delving into the realm of programming languages and learning the ropes of web development technologies.
This initiative encompasses a wide range of valuable resources, covering essential languages such as HTML, CSS, JavaScript, and advanced frameworks like React.js and Next.js.
| Created by | Coding Pakistan |
| Languages | HTML / CSS & JavaScript |
| Source Code | GitHub |
| Preview | Take Preview |
How To Create a Typing Text Animation Using HTML, CSS & JavaScript
There are some steps to create this type of Typing Text Animation effect using HTML, CSS, and JavaScript that are given below.
- The first step is to create one folder.
- Open this folder in Vs Code Editor and create three files HTML, CSS, and JavaScript
- Make sure the HTML file extension is (.html), the CSS file extension will be (.css) and the JavaScript file extension is (.js)
- After creating files, you link a CSS file with an HTML file with the help of this line code. (<link rel=”stylesheet” href=”style.css”>)
- Also, link the JavaScript file with the HTML file using this line of code <script src=”script.js”></script>
- The last step is copying and pasting the given code into your files.
Typing Text Animation – Source Code
HTML FILE
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Created by www.codingpakistan.com -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typing Text Animation Effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2 class="heading">
Created By <span class="url"> <a href="http://codingpakistan.com/"> CodingPakistan.com </a> </span>
</h2>
<div class="container">
<span class="text-item first-text">I'm a</span>
<span class="text-item second-text">YouTuber</span>
</div>
</body>
<script src="script.js"></script>
</html>
CSS FILE
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.heading{
position: absolute;
top: 60px;
font-size: 40px;
}
a{
color: yellow;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #2a2f3b;
color: white;
}
.container{
width: 400px;
overflow: hidden;
}
.text-item{
position: relative;
font-size: 40px;
font-weight: 600;
}
.first-text{
color: white;
}
.second-text{
color: #00ff00;
}
.second-text::before{
content: "";
position: absolute;
left: 0;
top: 0;
background: #2a2f3b;
height: 100%;
width: 100%;
animation: 4s steps(12) infinite Animation;
border-left: 2px solid #00ff00;
}
@keyframes Animation{
100%{
left: 0;
}
40%, 60%{
left: calc(100% + 4px );
}
}
JavaScript FILE
const SecondText = document.querySelector('.second-text')
const TextFunction = ()=>{
setTimeout(()=>{
SecondText.innerHTML="YouTuber"
},0)
setTimeout(()=>{
SecondText.innerHTML="Freelancer"
},4000)
setTimeout(()=>{
SecondText.innerHTML="Web Developer"
},8000)
}
TextFunction()
setInterval(TextFunction,12000)
Video Tutorial – Typing Animation Using HTML, CSS, and JavaScript
If you’re having trouble understanding this code and want to learn more about it, please watch this video and consider subscribing to this YouTube channel for similar videos in the future.
Related Content
- Modal PopUp Box Using HTML / CSS & JavaScript
- Weather App using JavaScript with Source Code
- Movie App Using HTML and JavaScript
Conclusion
The typing text animation effect achieved through the combination of HTML, CSS, and JavaScript is a captivating and engaging way to enhance the visual appeal of web content.
By seamlessly mimicking the natural typing experience, this effect adds a dynamic element to the user interface, capturing the attention of visitors and creating a memorable browsing experience.
With its versatility and ease of implementation, web developers can leverage this technique to create compelling animations that effectively communicate messages and evoke emotions.
Whether used in headers, banners, or interactive elements, the typing text animation effect proves to be a valuable tool for enhancing the overall user experience and making web content more interactive and engaging.
