jQuery | Typing Plugins
Last Updated :
27 Apr, 2020
Typed.js is an jQuery plugin for giving our text a typewriter effect. The various features that typed.js provide are:
- Custom Typing Speed.
- Custom Backspace speed.
- Loop is supported (Infinite loop also).
To use this plugin, simply add the CDN link just above the body tag.
CDN link typing Plugins:
<script src=”https://cdn.jsdelivr.net/npm/typed.js@2.0.11″></script>
HTML Code: In HTML, we have just added an h1 tag with normal structure to perform the typing plugins in jQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>jQuery | Typing Plugins</title>
</head>
<body>
<h1 class="geeks"></h1>
</body>
</html>
|
CSS Code: For styling we have to aligned our text to the center of the page.
<style>
body {
margin: 0;
padding: 0;
}
h1 {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
color: Black;
}
</style>
|
JavaScript Code: In JS, we have an object of TYPED in which we have passes the class of h1 tag. Then we have an object with four attributes. Let’s understand each of them one by one.
- string: It takes N number of strings that you want your effect to be applied on. In our case we have used two strings.
- typeSpeed: It is used to set the typing or appearing speed of the text.
- backSpeed: It is used to set backspace or disappearing speed of text.
- loop: It is a boolean attribute. We have set it to true to loop the effect.
- JS Code:
<script>
var typed = new Typed(".geeks", {
strings: ["Hello!!!",
"A Computer Science Portal for Geeks"],
typeSpeed: 50,
backSpeed: 50,
loop: true,
});
</script>
|
Final solution: It is the combination of above three sections of code with CDN link.
- Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>jQuery | Typing Plugins</title>
<style>
body {
margin: 0;
padding: 0;
}
h1 {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
color: Black;
}
</style>
</head>
<body>
<h1 class="geeks"></h1>
<script src=
</script>
<script>
var typed = new Typed(".geeks", {
strings: ["Hello!!!",
"A Computer Science Portal for Geeks"],
typeSpeed: 50,
backSpeed: 50,
loop: true,
});
</script>
</body>
</html>
|
- Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...