Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Create an Animated Typing Effect using typed.js
Overview
Typed.js is an animation library supported by java script and other scripting languages. It provides the typing animation effect to the text. We can use this library by adding the CDN link of the library or by installing it using node package manager (NPM) or yarn. It gives a webpage with the typing animations in any paragraph or headings. So to know more about the typed.js typing animation effect. To use the animation the types.js provides a constructor named as typed() which takes two arguments as input.
Syntax
The syntax used to create the object of the constructor types is −
var typed = new Typed(element class or Id, callback function);
In the above given syntax the class or id is of the element which is to be targeted for the working of typing animations. The callback function is a function with an array of type string and few type constructor properties such as typing speed, back speed, loop and back speed delay.
Algorithm
Step 1 − Create a HTML file in a text editor and add a HTML boilerplate in 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 a script tag before the end of body tag.
<script></script>
Step 5 − Instantiate a 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 a function with the string text and 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 a browser and you will see a typing animation in the targeted text.
Example
In this example we will create a typing animation in the text using typed.js.
<html>
<head>
<title>typing animation</title>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11/lib/typed.min.js"></script>
</head>
<body>
<h3 style="text-align: center;">tutorialspoint.com</h3>
<div id="typed-text" style=" font-size: 2rem;font-family: monospace; font-weight: 800;"></div>
<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>
</body>
</html>
The given image below shows the output of the above example, which shows some text on the -browser’s screen. When a user opens this HTML file in the browser then a user can see the live working typing animation.
Conclusion
While working with typed.js you must check and write correctly the syntax for initializing the typed object, if there will be any mistake in its syntax then the animation would not work properly. We can customize the typing speed and delay according to our self by changing the value in the callback function which is passed in the type constructor.
2K+ Views
