MottoJS
Show your motto in an amazing way!
Visit Codepen live demo here
Installation
npm
npm install motto
or
git clone [email protected]:jrainlau/motto.git
Usage
create a html tag such as <h1></h1> etc
<h1 class="motto"></h1>
then include MottoJS
<script src="motto.min.js"></script>
MottoJSalso supportAMD,CommonJSandES2015.
then use new to create a MottoJS instance
var motto = new Motto(el, config)
``` > and add a class `.motto-shake` to the element > ``` ```if you want to add the shake effect, you should link the
motto.cssto your HTML:
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}
optionaldefault: ''
the text of your motto.
-
showUpSpeed {Number}
optionaldefault: 0
your motto will be a letter by letter on display, it's an option to control the speed.
-
flashSpeed {Number}
optionaldefault: 0
to control how fast will the messy code translate into meaningful motto.
-
flashTimeout {Number}
optionaldefault: 0
set the timeout between the messy code showed up and translated into meaningful motto.
-
callback {Function}
optionaldefault: {}
a callback function after translation.
Update
- v1.0.1: added shake css effect.
License
MIT
