A Customizable Text Typing Animation Effect With jQuery | Typewriter.js

jquery-typewriter-plugin

jquery-typewriter-plugin is a very small jQuery text animation plugin that applies the effect of a human configurable keyboard typing to any text you specify.

typewriter effect, typewriter effect css, typewriter text effect generator, typewriter effect js, typing and erasing animation css, multiline typewriter effect, typing animation, css typing animation loop

How to make use of it:

1. Load the jquery.typewriter.js plugin after jQuery.

<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 wish to have a blinking cursor on the finish of the text whereas typing.

<link rel="stylesheet" href="/path/to/dist/css/cursor.css" />

3. Apply the function typeWrite() to your text and accomplished it.

<p class="lead">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
</p>
$(".lead").typeWrite({
  // options here
});

4. Customize the animation speed.

$(".lead").typeWrite({
  speed: 300
});

5. Determine whether to repeat the animation.

$(".lead").typeWrite({
  repeat: true,
  interval: 1000,
});

6. Determine whether to show the cursor whereas typing.

$(".lead").typeWrite({
  cursor: false
});

7. Specify the text color.

$(".lead").typeWrite({
  color: "blue"
});

Configurable Text Typing Effect, jquery typewriter plugin/Github


See Demo And Download

Official Website(ZaphodElevated): Click Here

This superior jQuery/javascript plugin is developed by ZaphodElevated. For extra Advanced Usages, please go to the official website.