Dynamic Typewriter Using JavaScript
Hey learners..! have you ever seen the automatic typing text? Let me give an example in the movie of the intro or even in them there is the name of people get preview who has been working in this movie, my point is how this name preview have you focused firstly curser get blink and print one character and move ahead.
Similarly, another character also gets printed this is a very small project but it has more value in we-pages, especially in the portfolio. If you don’t know how we can design just join me on this blog and make sure your finger is free for scrolling down.
Using HTML And CSS we present Dynamic Typewriter Using JavaScript projects with source code available for you to copy and paste directly into your own project.
Welcome to our today’s blog with code with random. In this blog, we gonna learn how we can design a popup login form.
I hope you must have got an idea about the project.
Let’s have a look at our project.
HTML SECTION
Here is our HTML file from starting.
1. We have the following part in the HTML section.
2. First, we have two div one is with static div and another one with dynamic div.
3. In Dynamic div, we have a list item in ul that will be changing continuously.
4. Go through the below code and run it in your IDE or where you used to design just HTML without CSS styling.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multiple Texts Typing Animation </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="static-txt">I'm a</div>
<ul class="dynamic-txts">
<li><span>YouTuber</span></li>
<li><span>Designer</span></li>
<li><span>Developer</span></li>
<li><span>Freelancer</span></li>
</ul>
</div>
</body>
</html>
CSS SECTION
By CSS we will design static and dynamic class div we will make it in the center and all dynamic classes ul as overlap one another.
The Below code will analyze you more. So just add in your HTML half-complete file and wait to watch some magic.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #343F4F;
}
.wrapper{
display: flex;
}
.wrapper .static-txt{
color: #fff;
font-size: 60px;
font-weight: 400;
}
.wrapper .dynamic-txts{
margin-left: 15px;
height: 90px;
line-height: 90px;
overflow: hidden;
}
.dynamic-txts li{
list-style: none;
color: #FC6D6D;
font-size: 60px;
font-weight: 500;
position: relative;
top: 0;
animation: slide 12s steps(4) infinite;
}
@keyframes slide {
100%{
top: -360px;
}
}
.dynamic-txts li span{
position: relative;
margin: 5px 0;
line-height: 90px;
}
.dynamic-txts li span::after{
content: "";
position: absolute;
left: 0;
height: 100%;
width: 100%;
background: #343F4F;
border-left: 2px solid #FC6D6D;
animation: typing 3s steps(10) infinite;
}
@keyframes typing {
40%, 60%{
left: calc(100% + 30px);
}
100%{
left: 0;
}
} For a live preview, you can follow the below codepen..
See the Pen Typing effect in js by Ankit kumar (@Kumar-Ankit56) on CodePen.
By this blog… We have learned how we can design a Typing animation.
Now I’m looking for your reviews.
So, How was the blog, Learners?
If you want a more crisp blog like this then please check our Blogs sites CodewithRandom. keep tuned with us because every day you will learn something new here.
I hope that I’m able to make you understand this topic and that you have learned something new from this blog. If you faced any difficulty feel free to drop a comment down your problems and if you liked it, please show your love in the comment section. This fills bloggers’ hearts with enthusiasm for writing more new blogs.
Thank You For Visiting!!!
You can follow me on Instagram
