Configurable Text Typing Effect - jQuery Typewriter.js
| File Size: | 12.2 KB |
|---|---|
| Views Total: | 2287 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A super tiny jQuery text animation plugin that applies a configurable human keyboard typing effect to any text you specify.
How to use it:
1. Load the jquery.typewriter.js plugin after jQuery (slim build is recommended).
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/dist/js/jquery.typewriter.min.js"></script>
2. Load the cursor.css if you want to have a blinking cursor at the end of the text while typing. OPTIONAL.
<link rel="stylesheet" href="/path/to/dist/css/cursor.css" />
3. Apply the function typeWrite() to your text and done.
<p class="lead"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod </h1>
$(".lead").typeWrite({
// options here
});
4. Customize the animation speed. Default: 50.
$(".lead").typeWrite({
speed: 300
});
5. Determine whether to repeat the animation. Default: false.
$(".lead").typeWrite({
repeat: true,
interval: 1000,
});
6. Determine whether to show the cursor while typing. Default: true.
$(".lead").typeWrite({
cursor: false
});
7. Specify the text color. Default: 'black'.
$(".lead").typeWrite({
color: "blue"
});
Changelog:
2021-05-16
- v1.2.6: fix: limited speed
This awesome jQuery plugin is developed by ZaphodElevated. For more Advanced Usages, please check the demo page or visit the official website.











