Chaffle
Shuffle Randomly Character.
Demo
http://git.blivesta.com/chaffle/
Install
<script src="YOUR-PROJECT/chaffle.min.js"></script> <!-- OR CDN --> <script src="https://unpkg.com/chaffle/chaffle.min.js"></script>
npm
$ npm install chaffle
Usage
Markup
<p data-chaffle="en">English</p> <p data-chaffle="ja">ζ₯ζ¬θͺ</p> <p data-chaffle="ja-hiragana">γ²γγγͺ</p> <p data-chaffle="ja-katakana">γ«γΏγ«γ</p> <p data-chaffle="ua">Π£ΠΊΡΠ°ΡΠ½ΡΡΠΊΠ°</p> <!-- data options --> <p data-chaffle="en" data-chaffle-speed="100" data-chaffle-delay="200">Data options</p>
Call the Chaffle
const elements = document.querySelectorAll('[data-chaffle]'); Array.prototype.forEach.call(elements, function (el) { const chaffle = new Chaffle(el, { /* options */ }); chaffle.init(); });
e.g: mouseover
import Chaffle from 'chaffle'; const elements = document.querySelectorAll('[data-chaffle]'); Array.prototype.forEach.call(elements, function (el) { const chaffle = new Chaffle(el, { /* options */ }); el.addEventListener('mouseover', function () { chaffle.init(); }); });
Options
<p data-chaffle="en" data-chaffle-speed="100" data-chaffle-delay="200" > Data options </p>
OR
var chaffle = new Chaffle(el, { lang: 'en', // default: 'en' // 'en' || 'ja' || 'ja-hiragana' || 'ja-katakana' || 'ua' speed: 20, // default: 20 delay: 100, // default: 100 })
License
Released under the MIT license.