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

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

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

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

shuffleLetters.js

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

}

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

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

});

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