How to Create Animated Typing Effect using typed.js ?
Last Updated :
28 Apr, 2023
Typed.js is a JavaScript library that is used to type a set of strings at the speed that you set, backspace what it’s typed, and begin the typing with another string you have set.
Let us start by creating a project folder and name it as per your wish. Create two files and name them as “index.html” and “style.css”
Write the following code in “index.html”
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Typed.js</ title >
< link rel = "stylesheet" href = "./style.css" />
</ head >
< body >
< div class = "heading" >
< h1 >GeeksforGeeks</ h1 >
< h3 >
< span class = "text-slider-items" >
A computer Science portal for geeks,
A place to practice code
</ span >
< strong class = "text-slider" ></ strong >
</ h3 >
</ div >
</ body >
</ html >
|
Write the following CSS code into your “style.css” file.
CSS
body {
background-color : white ;
font-family : Roboto, Oxygen, Ubuntu, Cantarell,
'Open Sans' , 'Helvetica Neue' , sans-serif ;
}
.text-slider-items {
display : none ;
}
.heading {
margin-top : 200px ;
text-align : center ;
}
.heading h 1 {
color : limegreen;
font-size : 70px ;
}
.heading h 3 {
color : black ;
font-size : 20px ;
}
|
Now you have to download the “typed.js” scripts folder from the below link and unzip it and keep it in your project directory.
Download Link: https://mattboldt.com/demos/typed-js/
Also, you have to include a jQuery library to use jQuery functions. There are two ways either by downloading and adding the “jquery.js” file or by adding its CDN file link. Here you will add jQuery by using the CDN link.
CDN link: https://developers.google.com/speed/libraries/devguide#jquery
We have to import and add the “typed.js” file from the “typed.js” folder. Add all JavaScript files just before the “body” tag. Also add the below script into your “index.html” file.
HTML
< script src = "./typed.js-master/lib/typed.min.js" >
</ script >
jquery/3.5.1/jquery.min.js">
</ script >
< script >
if ($(".text-slider").length == 1) {
var typed_strings = $(".text-slider-items").text();
var typed = new Typed(".text-slider", {
strings: typed_strings.split(", "),
typeSpeed: 50,
loop: true,
backDelay: 900,
backSpeed: 30,
});
}
</ script >
|
It should look like this.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Typed.js</ title >
< link rel = "stylesheet" href = "./style.css" />
</ head >
< body >
< div class = "heading" >
< h1 >GeeksforGeeks</ h1 >
< h3 >
< span class = "text-slider-items" >
A computer Science portal for
geeks, A place to practice code
</ span >
< strong class = "text-slider" ></ strong >
</ h3 >
</ div >
< script src =
"./typed.js-master/lib/typed.min.js" >
</ script >
< script src =
</ script >
< script >
if ($(".text-slider").length == 1) {
var typed_strings =
$(".text-slider-items").text();
var typed = new Typed(".text-slider", {
strings: typed_strings.split(", "),
typeSpeed: 50,
loop: true,
backDelay: 900,
backSpeed: 30,
});
}
</ script >
</ body >
</ html >
|
Start the “index.html” file and notice the output.
Output:
Share your thoughts in the comments
Please Login to comment...