How to create animated typing effects using typed.js

Overview

Typed.js is an animation library that supports java script and other scripting languages. It provides typing animation effects to text. We can use the library by adding a CDN link to the library or installing it using Node Package Manager (NPM) or yarn. It provides a web page with typing animation in any paragraph or title. So you need to learn more about the typing animation effect of typed.js. To use animations, types.js provides a constructor called typed() which accepts two parameters as input.

grammar

The syntax for creating an object of constructor type is -

var typed = new Typed(element class or Id, callback function);

In the syntax given above, the class or ID is the target element that the typing animation works on. The callback function is a function with an array of type string and some type constructor properties such as typing speed, return speed, loop and return speed delay.

algorithm

Step 1 − Create an HTML file in a text editor and add HTML boilerplate to it.

Step 2− Add the typed.js CDN link in the head tag of the HTML document.

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11/lib/typed.min.js"></script>

Step 3 − Now create a div container with the ID name "typed-text".

<div id="typed-text"></div>

Step 4 − Create the script tag before the end of the body tag.

<script></script>

Step 5 − Instantiate the typed constructor and create an object and store it in a reference variable.

var typed = new Typed();

Step 6 − Pass the two parameters to the typed constructor as the id name of the element and pass a function that contains the string literal and the typing Speed ​​as typespeed.

var typed = new Typed('#typed-text', {
   strings: ["Welcome to the tutorials point. There are many different course on our platform. We also provide you with the tutorial for wach and every techcnology.", "incidunt quasi aperiam ipsum dolorum nisi rem inventore error voluptate? Voluptate laborum iure,. Blanditiis corporis expedita temporibus atque sit, molestiae itaque in ullam, ex pariatur incidunt quasi aperiam ipsum dolorum nisi rem inventore error voluptate? Voluptate laborum iure, dolores beatae ratione eos laboriosam velit corrupti unde praesentium quidem, minima qui cumque. Deserunt doloribus modi amet."],
   typeSpeed: 40,
   backSpeed: 10,
   loop: true
});

Step 7 − Open the index.html file in the browser, you will see the typing animation in the target text.

Example

In this example, we will use typed.js to create a typing animation in text.

   
   <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11/lib/typed.min.js"></script>


   
tutorialspoint.com
   

   <script>
      var typed = new Typed('#typed-text', {
         strings: ["Welcome to the tutorials point. There are many different course on our platform. We also provide you with the tutorial for each and every techcnology.", "incidunt quasi aperiam ipsum dolorum nisi rem inventore error voluptate? Voluptate laborum iure,. Blanditiis corporis expedita temporibus atque sit, molestiae itaque in ullam, ex pariatur incidunt quasi aperiam ipsum dolorum nisi rem inventore error voluptate? Voluptate laborum iure, dolores beatae ratione eos laboriosam velit corrupti unde praesentium quidem, minima qui cumque. Deserunt doloribus modi amet."],
         typeSpeed: 40,
         backSpeed: 10,
         loop: true
     });
   </script>

The image below shows the output of the above example, showing some text on the browser screen. When a user opens this HTML file in a browser, the user can see a typing animation working in real time.

in conclusion

When using typed.js, you must check and write the syntax for initializing type objects correctly, if there are any errors in the syntax, the animation will not work properly. We can customize the typing speed and latency to our needs by changing the values ​​in the callback function passed in the type constructor.

The above is the detailed content of How to create animated typing effects using typed.js. For more information, please follow other related articles on the PHP Chinese website!