πŸ”” Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Chaffle is a jquery plug-in that allows you to shuffle randomly character.

Plugins Text Effect

Documentation

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.


You May Also Like