Configurable Text Typing Effect - jQuery Typewriter.js

File Size: 12.2 KB
Views Total: 1958
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Configurable Text Typing Effect - jQuery Typewriter.js

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
  // options here

4. Customize the animation speed. Default: 50.

  speed: 300

5. Determine whether to repeat the animation. Default: false.

  repeat: true,
  interval: 1000,

6. Determine whether to show the cursor while typing. Default: true.

  cursor: false

7. Specify the text color. Default: 'black'.

  color: "blue"



  • 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.