jQuery | Typing Plugins

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>
<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="https://cdn.jsdelivr.net/npm/typed.js@2.0.11">    </script>    <script>        var typed = new Typed(".geeks", {            strings: ["Hello!!!",            "A Computer Science Portal for Geeks"],                          typeSpeed: 50,            backSpeed: 50,            loop: true,        });    </script></body>  </html>                       
<!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="https://cdn.jsdelivr.net/npm/typed.js@2.0.11">    </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:
CSS-Misc
HTML-Misc
jQuery-Misc
CSS
HTML
JQuery
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.