Эффект тасующихся символов на jQuery

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

demosourse

 

Код

Сначала построим скелет нашего плагина jQuery. Код будет размещаться в самовыполняющейся анонимной функции.

assets/js/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;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){
			
				// Данный код выполняется несколько раз в секунду (определяется опцией fps)
				// и обновляет содержание элемента страницы
					
				var i,
					len = letters.length, 
					strCopy = str.slice(0);	// Свежая копия строки
					
				if(start>len){
					
					// Анимация завершена. Обновляем флаг и 
					// запускаем возвратную функцию
					
					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);
	
});

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: tutorialzine.com/2011/09/shuffle-letters-effect-jquery/
Перевел: Сергей Фастунов
Урок создан: 6 Октября 2011
Просмотров: 37739
Правила перепечатки


5 последних уроков рубрики "HTML и DHTML"

^ Наверх ^