Project address:https://github.com/jrainlau/m …
Experience address:https://jrainlau.github.io/mo …
Codepen:CodepenLatest update: Version 1.0.1 has added “Jitter Effect”, similar to the appearance of signal interference, welcome to taste ~
Tanabata is coming, I won’t tell you this is a confession artifact … Write a long confession letter, putconfig
Set the time inside longer, and then silently send it to your sweetheart …
Introduction
MottoJS
JS plug-in is a 4kb(.min file is only 2kb) js plug-in, green and independent. viaMottoJS
You can show your motto in a cool way.
Installation
npm
npm install motto
or
git clone git@github.com:jrainlau/motto.git
Use
Write an html tag, such as<h1></h1>
Or other
<h1 class="motto"></h1>
Then introduceMottoJS
<script src="motto.min.js"></script>
MottoJS
At the same time support toAMD
,CommonJS
OrES2015
In the past few years.
Then usenew
Operator to generate a MottoJS instance
var motto = new Motto(el, config)
Parameter
MottoJS
Accept two parameters.
-
el {String / HTML element}
Must
Use the CSS selector to select an html element to display your motto. -
config {Object}
Must
An object with 5 attributes for configuring 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() { ... }
}
-
lyric {String}
Optional
Default value:''
The content of your motto.
-
showUpSpeed {Number}
Optional
Default value: 0
Your motto will appear word by word. This option is used to set the interval between them.
-
flashSpeed {Number}
Optional
Default value: 0
Control when your motto changes from garbled to meaningful sentences.
-
flashTimeout {Number}
Optional
Default value: 0
Sets the transition time from the complete output of the motto to the garbled conversion.
-
callback {Function}
Optional
Default: {}
Callback function after garbled conversion.
Certificate
MIT
Thank you for reading. I am Jrain, welcome to pay attention.My column, will not regularly share their learning experience, development experience, carrying dry goods outside the wall. See you next time!