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

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

 

Сначала построим скелет нашего плагина 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.


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/azNES99BwLo/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Эффект тасующихся символов на jQuery | | 2012-06-19 12:02:56 | | Статьи Web-мастеру | | В данном уроке мы сделаем плагин jQuery, который тасует текст любого элемента DOM. Эффект можно использовать в заголовках, логотипах и слайдшоу. Сначала построим скелет нашего плагина jQuery. Код | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: