Random Shuffled Text Effect with jQuery Chaffle Plugin

File Size: 20.5 KB
Views Total: 4058
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Random Shuffled Text Effect with jQuery Chaffle Plugin

Chaffle is a lightweight jQuery plugin that has the ability to randomly shuffle each letter of your text content on mouse over.

See also:

How to use it:

1. Add the jQuery library and the jQuery chaffle plugin into your html page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="dist/js/chaffle.js"></script>

2. Wrap the text content in a container element with a CSS class. Use data-lang attribute to set the language used for the text shuffle effect. Currently supports English (en) and Japanese (ja).

<a href="#" class="chaffle" data-lang="en">jQueryScript.net</a>

3. Call the plugin and set the animation speed in the javascript.

<script>
$(document).ready(function() {
$('.chaffle').chaffle({
speed: 20,
time: 140
});
}); 
</script>

Change log:

2014-09-28

  • v1.0.0

This awesome jQuery plugin is developed by blivesta. For more Advanced Usages, please check the demo page or visit the official website.