How to create infinite loop of Shuffle Text Effect using the code below?
It stops after animation is finished .
How to start again when first loop of animation is completed?
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<div id="container">text</div>
This is the main script
(function($) {
$.fn.shuffleLetters = function(prop) {
var options = $.extend({
"step": 10, // How many times should the letters be changed
"fps": 35, // Frames Per Second
"text": "", // Use this text instead of the contents
"callback": function() {} // Run once the animation is complete
}, prop)
return this.each(function() {
var el = $(this),
str = "";
// Preventing parallel animations using a flag;
if (el.data('animated')) {
return true;
}
el.data('animated', true);
if (options.text) {
str = options.text.split('');
} else {
str = el.text().split('');
}
// The types array holds the type for each character;
// Letters holds the positions of non-space characters;
var types = [],
letters = [];
// Looping through all the chars of the string
for (var i = 0; i < str.length; i++) {
var ch = str[i];
if (ch == " ") {
types[i] = "space";
continue;
} else if (/[a-z]/.test(ch)) {
types[i] = "lowerLetter";
} else if (/[A-Z]/.test(ch)) {
types[i] = "upperLetter";
} else {
types[i] = "symbol";
}
letters.push(i);
}
el.html("");
// Self executing named function expression:
(function shuffle(start) {
// This code is run options.fps times per second
// and updates the contents of the page element
var i,
len = letters.length,
strCopy = str.slice(0); // Fresh copy of the string
if (start > len) {
// The animation is complete. Updating the
// flag and triggering the callback;
el.data('animated', false);
options.callback(el);
return;
}
// All the work gets done here
for (i = Math.max(start, 0); i < len; i++) {
// The start argument and options.step limit
// the characters we will be working on at once
if (i < start + options.step) {
// Generate a random character at thsi position
strCopy[letters[i]] = randomChar(types[letters[i]]);
} else {
strCopy[letters[i]] = "";
}
}
el.text(strCopy.join(""));
setTimeout(function() {
shuffle(start + 1);
}, 1000 / options.fps);
})(-options.step);
});
};
function randomChar(type) {
var pool = "";
if (type == "lowerLetter") {
pool = "abcdefghijklmnopqrstuvwxyz0123456789";
} else if (type == "upperLetter") {
pool = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
} else if (type == "symbol") {
pool = ",.?/\\(^)![]{}*&^%$#'\"";
}
var arr = pool.split('');
return arr[Math.floor(Math.random() * arr.length)];
}
})(jQuery);
* * Script: * *
$(function() {
// container is the DOM element;
// userText is the textbox
var container = $("#container")
userText = $('#userText');
// Shuffle the contents of container
container.shuffleLetters();
// Leave a 4 second pause
setTimeout(function() {
// Shuffle the container with custom text
container.shuffleLetters({
"text": "Test it for yourself!"
});
}, 1000);
});
Looking at shuffleLetters plugin the code, it supports callback. So if the code is working correctly, should be something like this:
// Shuffle the contents of container
function loop() {
container.shuffleLetters({callback:loop});
}
loop();
http://jsfiddle.net/083mxoxp
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With