Эффект перемешивания символов на jQuery

Хотите оформить красиво свой сайт необычными фишками, тогда этот урок будет вам интересен. В данном уроке мы рассмотрим как создать красивое перемешивание символов с помощью плагина jquery. Идея состоит в том, что вы вводите любой текст, а он будет печататься с рондомных символов. На первый взгляд звучит все сложно и не понятно, а на самом деле все элементарно просто. Эффект можно использовать в заголовках, логотипах и слайдшоу, это позволит сделать сайт более привлекательным и необычным.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Как я уже говорил, для этого мы будем использовать плагин jQuery. Давайте рассмотрим код плагина будет размещаться в самовыполняющейся анонимной функции:

shuffleLetters.js

(function($){

    $.fn.shuffleLetters = function(prop){

        // Обрабатываем аргументы
        var options = $.extend({
            // Значения по умолчанию
        },prop)

        return this.each(function(){
            // Основной код плагина будет здесь
        });
    };

    // Вспомогательная функция

    function randomChar(type){
        // Генерируем и  возвращаем случайный символ
    }

})(jQuery);

(function($){

$.fn.shuffleLetters = function(prop){

// Обрабатываем аргументы

var options = $.extend({

// Значения по умолчанию

},prop)

return this.each(function(){

// Основной код плагина будет здесь

});

};

// Вспомогательная функция

function randomChar(type){

// Генерируем и возвращаем случайный символ

}

})(jQuery);

Теперь рассмотрим некоторые вспомогательной функции randomChar(). Она получает аргумент типа символа (возможные значения “lowerLetter“, “upperLetter” или “symbol“) и возвращает случайный символ.

Конечно, можно использовать один набор символов для замены. Но такое разделение создает более привлекательный эффект.

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)];
}

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)];

}

Теперь рассмотрим плагин полностью, каждая функция описана в коде, по этому уделять этому более глубокий анализ не требуется:

$.fn.shuffleLetters = function(prop){

	var options = $.extend({
		"step"		: 8,	// Сколько раз должны меняться символы
		"fps"		: 25,	// Кадров в секунду
		"text"		: "", 	// Использовать данный текс вместо содержимого
		"callback"	: function(){}	// Выполняется при заверешении анимации
	},prop)

	return this.each(function(){

		var el = $(this),
			str = "";

		// Для предотвращения одновременных анимаций используем флаг

		if(el.data('animated')){
			return true;
		}

		el.data('animated',true);

		if(options.text) {
			str = options.text.split('');
		}
		else {
			str = el.text().split('');
		}

		// Массив types содержит типы символов
		// Массив letters сохраняет положение символов, отличных от пробела

		var types = [],
			letters = [];

		// Looping through all the chars of the string

		for(var i=0;ilen){

				// Анимация завершена. Обновляем флаг и
				// запускаем возвратную функцию

				el.data('animated',false);
				options.callback(el);
				return;
			}

			// Все работы выполняются здесь
			for(i=Math.max(start,0); i < len; i++){

				//Аргумент start и опция step ограничивают символы,
				//которые обрабатываются за один раз

				if( i < start+options.step){
		// Генерируем случайный символ в данной позиции
					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);

	});
};

$.fn.shuffleLetters = function(prop){

var options = $.extend({

"step" : 8, // Сколько раз должны меняться символы

"fps" : 25, // Кадров в секунду

"text" : "", // Использовать данный текс вместо содержимого

"callback" : function(){} // Выполняется при заверешении анимации

},prop)

return this.each(function(){

var el = $(this),

str = "";

// Для предотвращения одновременных анимаций используем флаг

if(el.data('animated')){

return true;

}

el.data('animated',true);

if(options.text) {

str = options.text.split('');

}

else {

str = el.text().split('');

}

// Массив types содержит типы символов

// Массив letters сохраняет положение символов, отличных от пробела

var types = [],

letters = [];

// Looping through all the chars of the string

for(var i=0;ilen){

// Анимация завершена. Обновляем флаг и

// запускаем возвратную функцию

el.data('animated',false);

options.callback(el);

return;

}

// Все работы выполняются здесь

for(i=Math.max(start,0); i < len; i++){

//Аргумент start и опция step ограничивают символы,

//которые обрабатываются за один раз

if( i < start+options.step){

// Генерируем случайный символ в данной позиции

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);

});

};

Тут следует обратить внимание на некоторый нюанс. Плагин берет содержание элемента DOM, для которого он был вызван, или значение свойства text, если оно передано в качестве аргумента. Затем строка разделяется на символы и определяется их тип. Функция тасования использует setTimeout() для вызова самой себя и меняет случайным образом строку, обновляя элемент DOM на каждом шагу.

assets/js/script.js

$(function(){

	// Контейнер - элемент DOM;
	// userText - поле для текста

	var container = $("#container")
		userText = $('#userText');

	// Тасуем содержание контейнера
	container.shuffleLetters();

	// Привязываем события
	userText.click(function () {

	  userText.val("");

	}).bind('keypress',function(e){

		if(e.keyCode == 13){

			// Нажата клавиша ENTER

			container.shuffleLetters({
				"text": userText.val()
			});

			userText.val("");
		}

	}).hide();

	// Делаем паузу на 4 секунды

	setTimeout(function(){

		// Тасуем контейнер пользовательским текстом
		container.shuffleLetters({
			"text": "Проверьте его сами!"
		});

		userText.val("Введите что-нибудь...").fadeIn();

	},4000);

});

$(function(){

// Контейнер - элемент DOM;

// userText - поле для текста

var container = $("#container")

userText = $('#userText');

// Тасуем содержание контейнера

container.shuffleLetters();

// Привязываем события

userText.click(function () {

userText.val("");

}).bind('keypress',function(e){

if(e.keyCode == 13){

// Нажата клавиша ENTER

container.shuffleLetters({

"text": userText.val()

});

userText.val("");

}

}).hide();

// Делаем паузу на 4 секунды

setTimeout(function(){

// Тасуем контейнер пользовательским текстом

container.shuffleLetters({

"text": "Проверьте его сами!"

});

userText.val("Введите что-нибудь...").fadeIn();

},4000);

});

В демонстрации реализована возможность ввода текста, и вывода результата. Выше приведен код как эта функция реализована. Вот и все. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.