Эффект перемешивания букв с помощью jQuery

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

Код

Сначала напишем основу нашего jQuery плагина. Так как мы пишем собственный плагин, поместим его код в файл jquery.shuffleLetters.js, а основную функцию присоединим к объекту $.fn.

(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,	// Frames Per Second
        "text"	: "" 	// если не указан, эффект будет применен к содержимому элемента
    },prop)

    return this.each(function(){

        var el = $(this),
            str = "";

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

        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++){

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

    });
};

Плагин принимает содержимое элемента к которому он был применен или параметр text в качестве аргумента. Далее строка разбивается на символы и определяется тип каждого. Функция shuffle использует setTimeout() для вызова самой себя и обновления строки.

В демо вы можете использовать собственный текст, вот как это реализовано:

$(function(){

    var container = $("#container")
        userText = $('#userText');

    // перемешиваем содержимое #container
    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": "Test it for yourself!"
        });

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

    },4000);

});

Так же этот пример показывает как использовать плагин с собственным параметром text.

Плагин готов!