Package Exports

typeit

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (typeit) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

TypeIt: A jQuery Animated Typing Plugin

##Description A light jQuery plugin that outputs text like it's being typed.

##Setup

Create an empty HTML element to select.

<span class="type-it"></span>

Load jQuery, typeit.js, and typeit.css in your page.

<link rel="stylesheet" type="text/css" href="typeit.css">

<script src="jquery-2.1.4.min.js"></script>
<script src="typeit.js"></script>

Select the element and initialize the typeit() function. While you're doing this, enter the string you'd like to output.

$('.type-it').typeit({ whatToType:'Enter your string here!' });

##Usage

You can modify the options for the plugin in two different ways -- either by inserting them directly into the function call, or by using data attributes.

<span class="type-it"
data-typeit-whattotype="A new string to type."
data-typeit-speed="100"
data-typeit-lifelike="true"
data-typeit-showcursor="true">

</span>

$('.type-it').typeit();

or...

<span class="type-it"></span>

 $('.type-it').typeit({
   whatToType:'Enter your string here!',
   typeSpeed: 300,
   lifeLike: false,
   showCursor: true
 });

##Options

There are a number of options you may use to customize typeIt.

Option	Description	Default Value
whatToType	The string to be typed.	'This is the default string. Please replace this string with your own.'
typeSpeed	The typing speed.	500
lifeLike	Will make the typing pace irregular, as if a real person is doing it.	true
showCursor	Show a blinking cursor at the end of the string.	true

##Ideas for Improvement?

I'm still a web dev noob, so ideas for improvement are always welcome! If you choose to develop it locally, Gulp is configured to check & minify JavaScript and compile & compress SASS. In the root of the repo, use these commands to run these default tasks and watch for file changes (make sure Node.js and Gulp are installed on your computer):

cd gulp
npm install
gulp