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

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