Written in 2016.07.23

Project address: github.com/jrainlau/mo… Experience address: jrainlau. Making. IO/motto/Codepen: Codepen

Latest update: version 1.0.1 has added “jitter”, which looks like a signal being interfered, welcome to taste ~

Tanabata is coming, I won’t tell you this is a confession artifact… Write a long confession letter, set the config to a longer time, and silently send it to your sweetheart…

introduce

MottoJS is a 4KB (.min file is only 2KB) JS plug-in, green and dependency free. MottoJS has a cool way to showcase your motto.

The installation

npm

npm install motto
Copy the code

or

git clone [email protected]:jrainlau/motto.git
Copy the code

use

Write an HTML tag, such as

or something else 

<h1 class="motto"></h1>
Copy the code

Then introduce MottoJS

<script src="motto.min.js"></script>
Copy the code

MottoJS can also be introduced as AMD, CommonJS or ES2015.

The new operator is then used to generate a MottoJS instance

var motto = new Motto(el, config)
Copy the code

parameter

MottoJS accepts two parameters.

  • El {String/HTML Element} must use the CSS selector to select an HTML element that displays your motto.

  • Config {Object} must have an Object with five attributes to configure MottoJS.

configuration

The basic configuration objects are as follows:

{
    lyric: 'To be or not to be, that\'s a question.', showUpSpeed: 1000, flashSpeed: 100, flashTimeout: 1000, callback: function() { ... }}Copy the code

  • Lyric {String} Optional Default value: “Your motto content.”

  • ShowUpSpeed {Number} Optional Default: 0 Your mottos will appear word by word. This option is used to set the interval at which they appear.

  • FlashSpeed {Number} Optional Default: 0 Controls the amount of time your motto takes to transform from garbled words into meaningful sentences.

  • FlashTimeout {Number} Optional Default: 0 Sets the transition time between motto full output and garbled conversion.

  • Callback {Function} Optional Default value: {} The callback Function after the garbled conversion is complete.

certificate

MIT

Thank you for reading. I am Jrain, welcome to pay attention to my column, will not regularly share their own learning experience, development experience, handling dry goods outside the wall. See you next time!