Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yuanqing/malarkey
:keyboard: Simulate a typewriter effect in vanilla JavaScript.
https://github.com/yuanqing/malarkey
javascript typewriter
Last synced: about 2 months ago
JSON representation
:keyboard: Simulate a typewriter effect in vanilla JavaScript.
- Host: GitHub
- URL: https://github.com/yuanqing/malarkey
- Owner: yuanqing
- License: mit
- Created: 2014-08-25T02:42:47.000Z (about 10 years ago)
- Default Branch: main
- Last Pushed: 2021-01-30T07:40:51.000Z (over 3 years ago)
- Last Synced: 2024-07-23T11:34:54.400Z (about 2 months ago)
- Topics: javascript, typewriter
- Language: JavaScript
- Homepage: https://codepen.io/lyuanqing/pen/oqgOMK
- Size: 198 KB
- Stars: 239
- Watchers: 7
- Forks: 18
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
- fucking-awesome-web-effect - malarkey - Simulate a typewriter effect in vanilla JavaScript. (🚀 A series of exquisite and compact web page cool effects / Input Effect)
- awesome-web-effect - malarkey - Simulate a typewriter effect in vanilla JavaScript. (🚀 A series of exquisite and compact web page cool effects / Input Effect)
- awesome-web-animation - Malarkey - Simulate a typewriter effect in vanilla JavaScript. (Text)
README
# malarkey [](https://www.npmjs.org/package/malarkey) [](https://travis-ci.org/yuanqing/malarkey) [](https://coveralls.io/r/yuanqing/malarkey)
> Simulate a typewriter effect in vanilla JavaScript.
- Flexible API allowing granular control
- Option to repeat the sequence indefinitely
- Allows stopping and resuming the sequence on-the-fly
- 524 bytes gzipped
## Usage
> [**Editable demo (CodePen)**](https://codepen.io/lyuanqing/pen/oqgOMK)
```html
```
```js
const malarkey = require('malarkey')
const element = document.querySelector('.typewriter')
function callback (text) {
element.textContent = text
}
const options = {
typeSpeed: 50,
deleteSpeed: 50,
pauseDuration: 2000,
repeat: true
}
malarkey(callback, options)
.type('Say hello')
.pause()
.delete()
.type('Wave goodbye')
.pause()
.delete()
```
## API
```js
const malarkey = require('malarkey')
```
### const m = malarkey(callback [, options])
Initialise the typewriter effect with the given optional `options` settings.
- `callback` is a function that is invoked for every `type` and `delete` event in the sequence. The function signature is `(text)`, where `text` is the string of characters that have been typed so far.
- `options` is an object literal:
Key | Description | Default
:--|:--|:--
`typeSpeed` | Duration in milliseconds to `type` a single character | `50`
`deleteSpeed` | Duration in milliseconds to `delete` a single character | `50`
`pauseDuration` | Duration in milliseconds to `pause` | `2000`
`repeat` | Whether to repeat the entire sequence indefinitely | `false`
### m.type(string [, options])
Type the given `string`, one character at a time.
- Set `options.speed` to override the default `typeSpeed`.
### m.delete([characterCount, options])
Delete the specified number of characters, one character at a time.
- `characterCount` is a positive integer. If not specified, all characters previously typed will be deleted, one character at a time.
- Set `options.speed` to override the default `deleteSpeed`.
### m.pause([options])
Do nothing for some duration.
- Set `options.duration` to override the default `pauseDuration`.
### m.clear()
Immediately clear all characters that were typed.
### m.call(fn)
Call the given `fn` function.
- The function signature of `fn` is `(callback, text)`. Invoke `callback` to signal that `fn` has finished execution and that we can move on to the next event in the sequence.
### m.triggerStop([fn])
Stops the sequence. Calls the given `fn` function when the sequence has been stopped.
- The function signature of `fn` is `(text)`.
### m.triggerResume()
Resume the sequence. Has no effect if the sequence is already running.
### m.isStopped()
Returns `true` if the sequence is currently stopped, else returns `false`.
## Installation
Install via [yarn](https://yarnpkg.com):
```sh
$ yarn add malarkey
```
Or [npm](https://npmjs.com):
```sh
$ npm install --save malarkey
```
## License
[MIT](LICENSE.md)