Introduction to TypeIt
TypeIt is a powerful JavaScript library that allows you to create dynamic typing animations on your website with ease. Whether you want to create a typewriter effect or just make your text more dynamic, TypeIt offers a wide range of APIs to help you achieve your goals. Below, we introduce dozens of useful API examples with code snippets to get you started.
Basic Usage
// Include TypeIt library
<script src="https://cdn.jsdelivr.net/npm/typeit@8.0.1/dist/typeit.min.js"></script>
// Instantiation of TypeIt
new TypeIt("#example1", {
strings: "This is the basic usage of TypeIt!",
speed: 50,
loop: true
}).go();
API Examples
strings
Defines the strings to type.
new TypeIt("#example2", {
strings: ["Hello world!", "Welcome to our site!"],
speed: 75
}).go();
speed
Speed of typing in milliseconds.
new TypeIt("#example3", {
strings: "Speed set to 100 ms per character",
speed: 100
}).go();
loop
Enables looping animation.
new TypeIt("#example4", {
strings: "This text will loop",
loop: true
}).go();
cursorChar
Customizes cursor character.
new TypeIt("#example5", {
strings: "Cursor changed to underscore",
cursorChar: "_"
}).go();
breakLines
Controls whether lines should break automatically.
new TypeIt("#example6", {
strings: ["Line 1", "Line 2"],
breakLines: false
}).go();
wait
Add waiting time between sequences.
new TypeIt("#example7", {
strings: "Wait command example",
wait: 1500
}).go();
pause
Pauses the typing sequence at a specific point.
new TypeIt("#example8")
.type("Pausing here for a while", { speed: 50 })
.pause(2000)
.type(" and now we continue.")
.go();
type
Custom typing text with speed.
new TypeIt("#example9")
.type("Custom typing speed", { speed: 75 })
.go();
App Example Using TypeIt
Let’s create a small application that uses several of the TypeIt APIs to show a dynamic welcome message to users.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome Application with TypeIt</title>
<script src="https://cdn.jsdelivr.net/npm/typeit@8.0.1/dist/typeit.min.js"></script>
</head>
<body>
<h1 id="welcome"></h1>
<script>
new TypeIt("#welcome", {
strings: ["Welcome to Our Application!", "Loading...", "Please wait..."],
speed: 50,
breakLines: false,
loop: true,
wait: 1000,
cursorChar: "_"
}).go();
</script>
</body>
</html>
With this setup, users will see a welcome message that dynamically updates, creating a more engaging experience.
Hash: eb95b17fa5d12e5f02e073e82591f61608556cebd4c5f235253d032b0e05b2d2
