https://github.com/iamdanfox/typetype

human typing with jQuery
https://github.com/iamdanfox/typetype

Last synced: about 2 months ago
JSON representation

human typing with jQuery

• Host: GitHub
• URL: https://github.com/iamdanfox/typetype
• Owner: iamdanfox
• Created: 2014-04-18T22:32:08.000Z (over 10 years ago)
• Default Branch: gh-pages
• Last Pushed: 2014-12-02T17:13:41.000Z (about 10 years ago)
• Last Synced: 2024-08-01T03:40:57.498Z (4 months ago)
• Language: CoffeeScript
• Homepage: http://iamdanfox.github.io/typetype/
• Size: 663 KB
• Stars: 181
• Watchers: 13
• Forks: 25
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• stars - iamdanfox/typetype

README

        
[![Screencast](screencast.gif)][1]

typetype

========

typetype is a jQuery plugin that simulates a human typing.

Usage

-----

Include jQuery and [jquery.typetype.min.js][2] (just 517 bytes gzipped).

You can then append some text to `textarea`s, `input`s or other HTML elements.

```javascript

$('textarea').typetype('Some text that you want to demo')

```

Customize the typing

--------------------

```javascript

$('textarea').typetype(

  'Text to append',

  {

    e: 0.04, // error rate. (use e=0 for perfect typing)

    t: 100, // interval between keypresses

    keypress: function (){

      // called after every keypress (this may be an erroneous keypress!)

    },

    callback: function (){

      // the `this` keyword is bound to the particular element.

    }

  }

)

```

`backspace` jQuery plugin

-------------------------

Similarly, you can backspace text from an element in a believable way.

```javascript

$('textarea').backspace(

  14, // number of chars to backspace

  {

    t: 100, // interval between keypresses

    keypress: function (){ },

    callback: function (){ }

  }

)

```

Combined with jQuery animations

-------------------------------

Both plugins can be chained to make very readable, sequential jQuery:

```javascript

$('textarea')

  .typetype('Hello, world!')

  .delay(1000)

  .typetype('\n\nGoodbye.')

  .backspace(25)

  .fadeOut() // regular jQuery effects queue up nicely

```

Inspired by

-----------

@dmotz's delightful [TuringType][3].  I was also inspired by Daniel

LeCheminant's [StackOverflow in 4096 bytes][4].

I challenge anyone to make a smaller gzipped version! (`make gz` was useful)

License

-------

This project is licensed under the MIT license.

[1]: http://iamdanfox.github.io/typetype/

[2]: http://iamdanfox.github.io/typetype/jquery.typetype.min.js

[3]: https://github.com/dmotz/TuringType

[4]: http://danlec.com/blog/stackoverflow-in-4096-bytes