Dynamic Typewriter in JavaScript | Typewriter Html Javascript – Codewithrandom







Dynamic Typewriter in JavaScript | Typewriter Html Javascript – Codewithrandom

Learners, have you ever seen the automatic typing text. Let me give a 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 get 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 πŸ˜‰.

Hey learners..!
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.
    

Here I’m a character is fixed but a character with red color getting changed with moving pointer after completing it there will another text.

  

Dynamic Typewriter in JavaScript | Typewriter Html Javascript - Codewithrandom

HTML SECTION 

Here is our HTML file from starting.


We have the following part in the HTML section.
  • First, we have two div one is with static div and another one with dynamic div.
  • In Dynamic div we have a list item in ul that will be change continuously.
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 class 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.

You can follow me on Instagram 

Written by @Ankit kumar
 
Project idea from YT channel as Codingnepal.
Share on:

Leave a Comment