https://github.com/connoratherton/typeout

Type and retype text in the browser.
https://github.com/connoratherton/typeout

Last synced: 20 days ago
JSON representation

Type and retype text in the browser.

• Host: GitHub
• URL: https://github.com/connoratherton/typeout
• Owner: ConnorAtherton
• License: mit
• Created: 2014-12-27T05:45:29.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2015-04-05T03:55:38.000Z (over 9 years ago)
• Last Synced: 2024-10-13T09:33:01.308Z (about 1 month ago)
• Language: JavaScript
• Homepage:
• Size: 172 KB
• Stars: 86
• Watchers: 6
• Forks: 12
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
## typeout

Produces a nice text effect increasingly adopted by companies like [Google](), [npm]() and more.

[See a demo](http://htmlpreview.github.io/?https://github.com/ConnorAtherton/typeout/blob/master/example/index.html)

## how to use

``` js

/*

 * @params selector [string] -

 * @params wordList [array]  - Contains all the word to write

 * @params options  [object] - Override default options (shown below)

 */

typeout(selector, word_list, options);

```

Usually the selector will reference a **span** element or some other

element that is displaying inline. But it will work with any element.

```html



  San Francisco is amazing



```


Any html child element of the selector element will automatically be

appended to the append list. In the example above the word *amazing*

will be added to the world list you pass in.

```js

// basic usage with just one loop

typeout('.typeout', ['wonderful', 'eye-opening', 'an experience'], {

  callback: function(el) {

    el.innerHTML += ".";

  }

});

```

The code above will typeout all words in the word list once and on completion

will add a period (.) at the end.

### default options

```js

var defaults = {

  interval: 3000,

  completeClass: 'typeout-complete',

  callback : function noop() {},

  max: 110, // upper limit for typing speed

  min: 40,   // lower limit for typing speed

  numLoops: 1 // number of loops before the callback is called

};

```

You can have an infinite loop passing numLoops as Infinity, but I wouldn't recommend it.

Unless I add es6 generators at some point.