https://github.com/jrainlau/motto
A tool to show your motto in an amazing way
https://github.com/jrainlau/motto
Last synced: 21 days ago
JSON representation
A tool to show your motto in an amazing way
- Host: GitHub
- URL: https://github.com/jrainlau/motto
- Owner: jrainlau
- License: mit
- Created: 2016-07-22T07:09:12.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-02-22T08:20:54.000Z (about 7 years ago)
- Last Synced: 2025-04-02T03:34:52.678Z (29 days ago)
- Language: JavaScript
- Homepage: https://jrainlau.github.io/motto/
- Size: 17.6 KB
- Stars: 49
- Watchers: 4
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# MottoJS
Show your motto in an amazing way!
> Visit [Codepen live demo](http://codepen.io/jrainlau/pen/vKQKEA) here
# Installation
npm
```
npm install motto
```
or
```
git clone [email protected]:jrainlau/motto.git
```
# Usage
create a html tag such as `
` etc
```
```
then include `MottoJS`
```
```
> `MottoJS` also support `AMD`, `CommonJS` and `ES2015`.
then use `new` to create a MottoJS instance
```
var motto = new Motto(el, config)
```
> if you want to add the *shake* effect, you should link the `motto.css` to your HTML:
> ```
```
> and add a class `.motto-shake` to the element
> ```
```
# Params
`MottoJS` receive two params.
- ### el {String / HTML element} `required`
use CSS selector to select a html element for showing the motto.
- ### config {Object} `required`
it's an object with five optional properties.
# Config
the base config object is
```
{
lyric: 'To be or not to be, that\'s a question.',
showUpSpeed: 1000,
flashSpeed: 100,
flashTimeout: 1000,
callback: function() { ... }
}
```
- #### lyric {String} `optional` `default: ''`
the text of your motto.
- #### showUpSpeed {Number} `optional` `default: 0`
your motto will be a letter by letter on display, it's an option to control the speed.
- #### flashSpeed {Number} `optional` `default: 0`
to control how fast will the messy code translate into meaningful motto.
- #### flashTimeout {Number} `optional` `default: 0`
set the timeout between the messy code showed up and translated into meaningful motto.
- #### callback {Function} `optional` `default: {}`
a callback function after translation.
# Update
- v1.0.1: added *shake* css effect.
# License
MIT