MottoJS，一個讓你的「座右銘」更好玩的JS插件

項目地址：https://github.com/jrainlau/m...
體驗地址：https://jrainlau.github.io/mo...
Codepen: Codepen

最新更新：1.0.1版本加入了「抖動特效」，相似信號被幹擾的樣子，歡迎品嚐~

七夕快到了，我不會告訴你這是一個告白神器……寫一封長長的告白信，把config裏面的時間設置得長一些，而後默默地把它發給你的心上人……

介紹

MottoJS是一個只有4kb（.min文件只有2kb）的JS插件，綠色無依賴。經過MottoJS能夠用一個很酷炫的方式展現你的座右銘。

安裝

npm

npm install motto

or

git clone git@github.com:jrainlau/motto.git

使用

編寫一個html標籤，好比<h1></h1>或其餘

<h1 class="motto"></h1>

而後引入MottoJS

<script src="motto.min.js"></script>

MottoJS同時支持以AMD, CommonJS或ES2015的方式引入。

而後使用new操做符去生成一個MottoJS實例

var motto = new Motto(el, config)

參數

MottoJS接受兩個參數。

• el {String / HTML element} 必須
  使用CSS選擇器去選擇一個用於展現你的座右銘的html元素。

• config {Object} 必須
  一個帶有5個屬性的用於配置MottoJS的對象。

配置

基本的配置對象以下：

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

• lyric {String} 可選 默認值: ''
  你的座右銘內容。

• showUpSpeed {Number} 可選 默認值: 0
  你的座右銘將會一個字一個字地出現，這個選項用於設置它們出現的間隔時間。

• flashSpeed {Number} 可選 默認值: 0
  控制你的座右銘從亂碼轉化成有意義的句子的時間。

• flashTimeout {Number} 可選 默認值: 0
  設置從座右銘徹底輸出到亂碼轉換之間的過渡時間。

• callback {Function} 可選 默認值: {}
  亂碼轉換完成後的回調函數。

證書

MIT

---

感謝你的閱讀。我是Jrain，歡迎關注個人專欄，將不按期分享本身的學習體驗，開發心得，搬運牆外的乾貨。下次見啦！