Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • 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:



My Personal Notes arrow_drop_up
Recommended Articles
Page :