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.