jQuery | Typing Plugins

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.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


CSS Code: For styling we have to aligned our text to the center of the page.

filter_none

edit
close

play_arrow

link
brightness_4
code

<style>
    body {
        margin: 0;
        padding: 0;
    }
    h1 {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        text-align: center;
        color: Black;
    }
</style>

chevron_right


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

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
        var typed = new Typed(".geeks", {
            strings: ["Hello!!!", 
            "A Computer Science Portal for Geeks"],
            typeSpeed: 50,
            backSpeed: 50,
            loop: true,
        });
    </script>

    chevron_right

    
    

Final solution: It is the combination of above three sections of code with CDN link.

  • Program:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                       

    chevron_right

    
    

  • Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.