Shuffle Randomly Character.
Switch branches/tags
Nothing to show
Clone or download
Latest commit 422e001 Sep 17, 2016

README.md

Chaffle

npm version Bower version Build Status

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.