Configurable Text Typing Effect - jQuery Typewriter.js

Configurable Text Typing Effect - jQuery Typewriter.js
File Size: 12.2 KB
Views Total: 110
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.