If you want to know how it works, you can use the demo section below. Here you will find the required source code.
Step 1: Design the web page
I designed the web page using a small amount of CSS code below. Here we have used black as the background color of the webpage and min-height: 100vh.
Step 2: Add and design the fixed text
Here I have used two lines of HTML code. The first line is used to add fixed text and the second line is used to add typed text. Now I have designed that fixed text using the HTML and CSS code below.
The color of the text is white, font-size: 55px and font-family: sans-serif.
typeSpeed: I have used 100, which means that when each word is typed, its speed will be 100. Here I have used backSpeed: 40, which means that when each word is backed up again, its speed will be 40. Here loop: true means this typing process will continue till infinity.
To make this work more effective you need to add a CDN link of type.Js.
Step 4: Design the type text using CSS
Above we have implemented the animation. Now I have designed this typing text with the help of CSS. Here I have used the color blue of the text, I have used the font-size 50px. I did not use any separate code to create the cursor here. I just made a blue cursor using border-right.
Hopefully from the tutorial above you have learned how to create typing animations using type.Js. I have already shown this type of typing animation using only pure CSS for beginners.