Open In App

How to Create Animated Typing Effect using typed.js ?

Improve
Improve
Like Article
Like
Save
Share
Report

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

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 practice code
            </span>
 
            <strong class="text-slider"></strong>
            <!-- classes "text-slider"
            and "text-slider-items"
            for typed.js script -->
        </h3>
    </div>
</body>
 
</html>


Write the following CSS code into your “style.css” file.

CSS




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;
}


Now you have to download the “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 a 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 the CDN link.

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

We have to import and add the “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 practice 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: 



Last Updated : 28 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads