Skip to content
Related Articles

Related Articles

How to Create Animated Typing Effect using typed.js ?
  • Difficulty Level : Basic
  • Last Updated : 21 Jul, 2020

Typed.js is a JavaScript library which 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”

  1. Write the following code in “index.html”

    HTML






    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>Typed.js</title>
        <!-- Import style.css from root directory -->
        <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 pratice code
                </span>
      
                <strong class="text-slider"></strong>
                <!-- classes "text-slider" 
                and "text-slider-items"
                for typed.js script -->
            </h3>
        </div>
    </body>
      
    </html>
  2. Write the following CSS code into your “style.css” file.




    <style>
        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 h1 {
            color: limegreen;
            font-size: 70px;
        }
      
        .heading h3 {
            color: black;
            font-size: 20px;
        }
    </style>
  3. Now you have to download “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 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 CDN link.

    CDN link: https://developers.google.com/speed/libraries/devguide#jquery

  4. We have to import and add “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>
      
        <!-- Import style.css from root directory -->
        <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 pratice code
                </span>
                <strong class="text-slider"></strong>
      
            </h3>
        </div>
        <!-- Import typed.min.js file from typed.js folder -->
        <script src=
            "./typed.js-master/lib/typed.min.js">
        </script>
          
        <!-- Add jquery cdn -->
        <script src=
        </script>
      
        <!-- Add this script for successful 
            implementation of typed.js  -->
        <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:

My Personal Notes arrow_drop_up
Recommended Articles
Page :