Are you looking to add some dynamic flair to your website? Look no further than Multiple Typing Text Animations! This tutorial will show you how to create engaging and interactive multiple-typing text animations using HTML, CSS, and JavaScript. This effect is a fantastic way to capture visitors’ attention and make your website more interactive and modern.
What Are Multiple Typing Text Animations?
Multiple typing text animations are dynamic animations where the text automatically changes, similar to the effect of a classic typewriter. These animations have become increasingly popular in web design for their ability to engage users and give websites a modern, professional touch. Whether you’re building a portfolio, personal blog, or business site, these animations keep your visitors interested.
Why Use Multiple Typing Text Animations?
There are several reasons why multiple typing text animations can enhance your website:
- Increased Engagement: Animated text naturally draws the user’s eye, increasing engagement with your content.
- Modern Appeal: These animations provide a sleek, contemporary look that keeps your website updated with modern design trends.
- Versatile Applications: Multiple typing text animations can be adapted to suit various contexts, from highlighting critical services to showcasing essential skills.
How to Create Multiple Typing Text Animations
Creating this effect is easier than you might think! We’ll guide you step-by-step on implementing multiple typing text animations on your website. This project involves two types of text: one part remains static, while the other dynamically cycles through different phrases in a smooth, typewriter-like motion.
We’ll use a combination of HTML, CSS, and JavaScript for this. CSS will be responsible for the styling and basic animation, while JavaScript will control the text’s cycling.
Step 1: Setting Up the HTML Structure
First, you must create the HTML structure for your static and dynamic text. Minimal HTML allows us to focus more on the visual effects and animation.
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">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<span class="text first-text">I'm a</span>
<span class="text sec-text">Designer</span>
</div>
<script>
const text = document.querySelector(".sec-text");
const textLoad = () => {
setTimeout(() => {
text.textContent = "Designer";
}, 0);
setTimeout(() => {
text.textContent = "Blogger";
}, 4000);
setTimeout(() => {
text.textContent = "YouTuber";
}, 8000);
}
textLoad();
setInterval(textLoad, 12000);
</script>
</body>
</html>
Step 2: Styling with CSS
We’ll style the text using CSS to give it a professional and polished look and manage the smooth typing animation effect for the dynamic text.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
min-height: 100vh;
align-items: center;
justify-content: center;
background: #010718;
overflow: hidden;
}
.container {
width: 246px;
overflow: hidden;
}
.container .text {
position: relative;
color: #4070F4;
font-size: 30px;
font-weight: 600;
}
.container .text.first-text {
color: #FFF;
}
.text.sec-text:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #010718;
border-left: 2px solid #4070F4;
animation: animate 4s steps(12) infinite;
}
@keyframes animate {
40%, 60% {
left: calc(100% + 4px);
}
100% {
left: 0%;
}
}
Want to Check Username Availability on Social Media?If you’re looking to check username availability on various social media platforms, visit NameChkr to find out!
Read Also
Read Also
- Glassmorphism Login Form in HTML and CSS
Explore the stylish world of glassmorphism as you create a modern login form using HTML and CSS. This guide breaks down the design process step by step. - Toggle Button using HTML, CSS, and JavaScript
Discover how to enhance user interaction by creating a sleek toggle button with HTML, CSS, and JavaScript. This tutorial covers everything from structure to styling. - Responsive Cards in HTML and CSS
Learn how to design eye-catching responsive cards that adapt seamlessly to any device. This guide offers practical tips for achieving stunning layouts. - Build a Google Gemini Chatbot Using HTML, CSS, and JS
Dive into chatbot development by creating a Google Gemini chatbot with HTML, CSS, and JavaScript. This tutorial will help you understand the basics of interactive forms.
Conclusion
Adding multiple typing text animations to your website is an excellent way to make your content more engaging and modern. Whether you’re building a professional portfolio or a business website, this effect will help you capture your audience’s attention.
Don’t forget to download the complete source code below to experiment with multiple typing text animations on your site!
Download the Source Code
Click the button below to download this project’s complete source code and start immediately!
