This content originally appeared on DEV Community and was authored by Ganesh Patil
What is typed.js
Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.
This is pure CSS animation you can make with basic CSS animation property but with Typed.js its easy to make this moving text animation effect.
How to used
to used typed.js you have to navigate to GitHub link of typed.js
and copy the CDN file
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
Add typed.js to project
add CDN file into bottom of your HTML file before closing body tag and open new script tag. The entire code looks likes
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>
var typed = new Typed(".mov",{
strings: [, "Ganesh","Content Writer","Web Developer"] ,
typeSpeed: 100,
backSpeed: 100,
loop: true
})
</script>
and now add some simple HTML part to activate types.js code
<h1> I'm <span class="mov"> </span></h1>
Now you observe the .mov class is main element of this entire process of types.js and its simple.
The complete output is here output
Link to my GitHub repository which contains file and code.
also Connect with me on twitter I am sharing content related web development and free resources which is actually helpful for you.
This content originally appeared on DEV Community and was authored by Ganesh Patil
Ganesh Patil | Sciencx (2022-02-06T14:04:20+00:00) How to use typed.js. Retrieved from https://www.scien.cx/2022/02/06/how-to-use-typed-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.