Terminal-style Text Typing Plugin For jQuery - Typewriter

File Size: 4.26 KB
Views Total: 5293
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Terminal-style Text Typing Plugin For jQuery - Typewriter

Typewriter is a lightweight jQuery typewriting plugin which allows you to apply human typing/deleting effects on an array of text, with prefix and blinking cursor support. Suitable for creating a text rotator that allows to rotator through your text with typing/deleting effects.

How to use it:

1. Create a container element to hold the text rotator.

<h2 id="typewriter"></h2>

2. Put jQuery library and the jQuery Typewriter plugin's script at the bottom of the webpage.

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

3. Call the function on the container element and define an array of text strings you want to print out.

$('#typewriter').typewriter({
  text : ["String 1", "String 2", "String 3"],
});

4. Config the typing animation.

$('#typewriter').typewriter({
  typeDelay: 200,
  waitingTime: 1000,
});

5. Set the prefix.

$('#typewriter').typewriter({
  prefix: "$ "
});

6. Set the blinking speed.

$('#typewriter').typewriter({
  blinkSpeed: 1000
});

7. Style the plugin in the CSS:

#typewriter {
  ...
}

#typewriter-prefix {
  ...
}

#typewriter-text {
  ...
}

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