RSS лента

Galen

Эффект случайного перебора букв: плагин для jQuery [перевод]

Рейтинг: 3.00. Голосов: 2.
Оригинал: Shuffle Letters Effect: a jQuery Plugin
Автор: Martin Angelov
Дата публикации: 02.09.2011
Дата перевода: 06.01.2013

Демо
Скачать плагин

В этом небольшом руководстве мы рассмотрим создание плагина для jQuery, который реализует перемешивание текстового содержимого любого DOM-элемента – в результате мы получим интересный визуальный эффект, который можно будет применять в заголовках, логотипах и слайд-шоу.

Дополнение от 10.09.2011: Плагин слегка усовершенствован за счёт добавления функции обратного вызова, выполнение которой начинается по завершении основной анимации. Просто добавьте её в качестве свойства объекта, инициализирующего плагин:
$(‘#el’).shuffleLetters({callback:function(){} });

Код

Первым шагом будет создание основы нашего jQuery-плагина. Мы поместим код в самовызывающуюся анонимную функцию, в которой расширим $.fn.
assets/js/jquery.shuffleLetters.js
(function($){
$.fn.shuffleLetters = function(prop){
// Обработка аргументов по умолчанию
var options = $.extend({
// Аргументы по умолчанию
},prop);

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

// Вспомогательная функция
function randomChar(type){
// Генерирует и возвращает случайный символ
}
})(jQuery);

Далее подробно рассмотрим вспомогательную функцию randomChar(). Она принимает аргумент type (может иметь значение “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" : "" // Текст, используемый вместо содержимого DOM-элемента
},prop);

return this.each(function(){
var el = $(this),
str = "";

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

// Массив types хранит тип каждого символа
// Массив letters хранит позиции символов, не являющихся пробелом
var types = [],
letters = [];

// Цикл по всем символам обрабатываемой строки
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("");

// Самовызывающаяся именованная функция
(function shuffle(start){
// Этот код выполняется options.fps раз в секунду и обновляет содержимое элемента
var i,
len = letters.length,
strCopy = str.slice(0); // Обновлённая копия обрабатываемой строки

if(start>len){
return;
}

// Вся работа выполняется здесь
for(i=Math.max(start,0); i < len; i++){
// Аргумент start и options.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(){
// container – это DOM-элемент
// userText – это поле ввода строки
var container = $("#container"), userText = $('#userText');

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

// Привязка к событию
userText.click(function () {
userText.val("");
}).bind('keypress',function(e){
if(e.keyCode == 13){
// Если была нажата клавиша «Ввод»
container.shuffleLetters({
"text": userText.val()
});

userText.val("");
}
}).hide();

// Сделаем четырёхсекундную паузу
setTimeout(function(){
// На этот раз перемешаем не содержимое контейнера, а случайный текст
container.shuffleLetters({
"text": "Test it for yourself!"
});

userText.val("type anything and hit return..").fadeIn();

},4000);
});

Фрагмент выше так же демонстрирует, как использовать плагин с заданным параметром text.

Конец

Я надеюсь, плагин вам понравится, и вы сочтёте его полезным. Он доступен под MIT-лицензией.

Отправить "Эффект случайного перебора букв: плагин для jQuery [перевод]" в Digg Отправить "Эффект случайного перебора букв: плагин для jQuery [перевод]" в del.icio.us Отправить "Эффект случайного перебора букв: плагин для jQuery [перевод]" в StumbleUpon Отправить "Эффект случайного перебора букв: плагин для jQuery [перевод]" в Google

Метки: jquery Добавить / редактировать метки
Категории
Верстка сайтов , ‎ Javascript , ‎ Jquery

Комментарии

  1. Аватар для Fredi675
    Доброе время суток.
    Нужна ваша помощь по созданию jquery слайдера наподобие http://net.uanic.name/ , в хейдере с правой стороны. Дайте пожалуйста пример подобного слайдера.
    Рассмотрю вариант создания слайдера за символическую плату.