Dynamic Text Rotator With Typing Effect - jQuery typer.js

File Size: 6.99 KB
Views Total: 10942
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Dynamic Text Rotator With Typing Effect - jQuery typer.js

typer.js is a very small jQuery text rotator plugin which allows you to rotate through an array of text strings with typewriter style typing and deleting animations.

How to use it:

1. Create a container element in which you want to place the text rotator.

<h1 id="example">
</h1>

2. Include both jQuery JavaScript library and the jQuery typer.js script at the bottom of the html page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="typer.min.js"></script>

3. Initialize the rotator and define your own strings you want to rotate through.

$("#example").typer({
  strings: [
    "A great free jQuery plugin",
    "Animates typing strings",
    "Hosted In jQueryScript"
  ]
});

4. Config the typing/deleting animations with the following settings.

$("#example").typer({
  typeSpeed: 60,
  backspaceSpeed: 20,
  backspaceDelay: 800,
  repeatDelay: 1000,
  repeat: true,
  autoStart: true,
  startDelay: 100,
});

5. Decide whether to show the blinking cursor while typing.

$("#example").typer({
  useCursor: true
});

This awesome jQuery plugin is developed by 123apps. For more Advanced Usages, please check the demo page or visit the official website.