Simple Text Shuffle Effect with jQuery - Shuffle Text

File Size: 3.4 KB
Views Total: 7855
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple Text Shuffle Effect with jQuery - Shuffle Text

Shuffle Text is a fancy jQuery plugin to add shuffle effect to text content, by flipping each letter of your text with sequential characters.

Basic Usage:

1. Import jQuery shuffle text plugin in the page. Ensure you have jquery loaded before as well. 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.shuffleText.js"></script>

2. Wrap the text in a container.

<blockquote>SHUFFLE TEXT DEMO</blockquote>

3. Target the text content you want to shuffle in the javascript.

$(document).ready(function(){
$('blockquote').shuffleText("My output text");
});

4. Available options.

$(document).ready(function(){
$("blockquote").shuffleText("My output text", {
frames   : 40,    // Duration In ms (Milliseconds) Of Shuffle For Each Letter
maxSpeed : 1000,  // Max Duration In ms (Milliseconds) Of Global Shuffle
amount   : 3,     // Amount Of Shuffle For Each Letter
complete : null   // Do Something When Shuffle Is Completed
});
});

Change log:

v1.0.1 (2014-04-20)


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