Typing Effect with typed.js
source link: https://dev.to/j471n/typing-effect-with-js-34b8
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
As you may have already seen some website which has some kind of typing animation. It looks cool right but what if I tell you it is very easy to do.
I have already made an article about how you can make this type of effect with CSS but today we will build something different than that. In this effect, you can give multiple strings and it will display one by one.
First of all, let's visualize what I am talking about -
Preview
To make this work we need to use a library called typed.js So firstly add the following script to your project.
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
Enter fullscreen mode
Exit fullscreen mode
Now let's look at the rest of code, how this is cooking.
<h1>Hi, I am <span class="title"></span></h1>
Enter fullscreen mode
Exit fullscreen mode
HTML is very simple we just need to use only one element in order to make this work.
var options = {
strings: ["Jatin Sharma", "React Developer", "Python Developer"],
typeSpeed: 40,
backSpeed: 40,
loop: true
};
var typed = new Typed(".title", options);
Enter fullscreen mode
Exit fullscreen mode
Conclusion
It is as simple as that, now you can use this in your projects wherever you want. To learn how you can make typing effect in CSS visit the given link.
You can now extend your support by buying me a Coffee.??
Also Read
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK