Need help with chaffle?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

blivesta
218 Stars 42 Forks 47 Commits 5 Opened issues

Description

Shuffle Characters Randomly.

Services available

!
?

Need anything else?

Contributors list

# 21,244
CSS
wp-cli
WordPre...
Ubuntu
34 commits
# 56,142
css-tra...
angular...
scrollb...
vanilla...
1 commit
# 232,264
applesc...
macos-c...
Shell
CSS
1 commit

Chaffle

npm version Build Status

Shuffle Characters Randomly.

Demo

http://git.blivesta.com/chaffle/

Install


npm

$ npm install chaffle

Usage

Markup

English

日本語

ひらがな

カタカナ

Українська

中文

Data options

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

Data options

OR

var chaffle = new Chaffle(el, {
  lang: "en", // default: 'en'
  // 'en' || 'ja' || 'ja-hiragana' || 'ja-katakana' || 'ua' || 'cn'
  speed: 20, // default: 20
  delay: 100 // default: 100
});

License

Released under the MIT license.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.