Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Create an Animated Typing Effect using typed.js
Overview
Typed.js is a JavaScript animation library that creates realistic typing effects for web text. You can add it to your project via CDN, NPM, or Yarn. The library animates text by typing and deleting characters, simulating human typing behavior with customizable speed and effects.
Syntax
The basic syntax to create a Typed.js animation is:
var typed = new Typed(selector, options);
Where selector is the CSS selector (ID or class) of the target element, and options is an object containing configuration properties like strings, typing speed, and loop settings.
Installation
Add Typed.js to your project using the CDN link:
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
Basic Example
Here's a complete example showing how to create a typing animation:
<!DOCTYPE html>
<html>
<head>
<title>Typed.js Animation</title>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<style>
#typed-text {
font-size: 24px;
font-family: 'Courier New', monospace;
color: #333;
padding: 20px;
}
</style>
</head>
<body>
<h1>Welcome to TutorialsPoint</h1>
<div id="typed-text"></div>
<script>
var typed = new Typed('#typed-text', {
strings: [
"Learn JavaScript with us!",
"Master web development today.",
"Build amazing projects together."
],
typeSpeed: 50,
backSpeed: 30,
backDelay: 2000,
loop: true,
showCursor: true,
cursorChar: '|'
});
</script>
</body>
</html>
Configuration Options
Typed.js offers many customization options:
| Option | Type | Description | Default |
|---|---|---|---|
strings |
Array | Array of strings to be typed | [] |
typeSpeed |
Number | Typing speed in milliseconds | 0 |
backSpeed |
Number | Backspacing speed | 0 |
loop |
Boolean | Loop the strings | false |
showCursor |
Boolean | Show typing cursor | true |
Advanced Example with Multiple Options
<!DOCTYPE html>
<html>
<head>
<title>Advanced Typed.js</title>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<style>
.typing-container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
text-align: center;
}
#advanced-typed {
font-size: 20px;
line-height: 1.5;
color: #2c3e50;
min-height: 60px;
}
</style>
</head>
<body>
<div class="typing-container">
<h2>Advanced Typing Effect</h2>
<div id="advanced-typed"></div>
</div>
<script>
var advancedTyped = new Typed('#advanced-typed', {
strings: [
"Welcome to our coding tutorials!",
"Learn JavaScript step by step.",
"Build modern web applications.",
"Join thousands of developers worldwide."
],
typeSpeed: 60,
backSpeed: 40,
startDelay: 500,
backDelay: 1500,
loop: true,
fadeOut: true,
shuffle: false,
onComplete: function(self) {
console.log('Typing animation completed!');
}
});
</script>
</body>
</html>
Key Features
- Multiple Strings: Cycle through different text strings
- Customizable Speed: Control typing and backspacing speed
- Cursor Animation: Blinking cursor with custom characters
- Event Callbacks: Execute functions on start, complete, or reset
- Smart Backspacing: Only backspace differing characters
- Loop Control: Set finite or infinite loops
Conclusion
Typed.js provides an easy way to create engaging typing animations for your website. With its flexible configuration options and simple API, you can customize the animation to match your design needs and enhance user experience.
3K+ Views
