Все для веб-дизайнера
Эффект перемешивания символов на jQuery
Хотите оформить красиво свой сайт необычными фишками, тогда этот урок будет вам интересен. В данном уроке мы рассмотрим как создать красивое перемешивание символов с помощью плагина jquery. Идея состоит в том, что вы вводите любой текст, а он будет печататься с рондомных символов. На первый взгляд звучит все сложно и не понятно, а на самом деле все элементарно просто. Эффект можно использовать в заголовках, логотипах и слайдшоу, это позволит сделать сайт более привлекательным и необычным.
Как я уже говорил, для этого мы будем использовать плагин jQuery. Давайте рассмотрим код плагина будет размещаться в самовыполняющейся анонимной функции:
shuffleLetters.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
(function($){ $.fn.shuffleLetters = function(prop){ // Обрабатываем аргументы var options = $.extend({ // Значения по умолчанию },prop) return this.each(function(){ // Основной код плагина будет здесь }); }; // Вспомогательная функция function randomChar(type){ // Генерируем и возвращаем случайный символ } })(jQuery); |
Теперь рассмотрим некоторые вспомогательной функции randomChar(). Она получает аргумент типа символа (возможные значения “lowerLetter“, “upperLetter” или “symbol“) и возвращает случайный символ.
Конечно, можно использовать один набор символов для замены. Но такое разделение создает более привлекательный эффект.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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)]; } |
Теперь рассмотрим плагин полностью, каждая функция описана в коде, по этому уделять этому более глубокий анализ не требуется:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
$.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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
$(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); }); |
В демонстрации реализована возможность ввода текста, и вывода результата. Выше приведен код как эта функция реализована. Вот и все. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
| Опубликовал Cooper 29.01.2012 в 18:43, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
