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

Как я уже говорил, для этого мы будем использовать плагин jQuery. Давайте рассмотрим код плагина будет размещаться в самовыполняющейся анонимной функции:

shuffleLetters.js

Теперь рассмотрим некоторые вспомогательной функции randomChar(). Она получает аргумент типа символа (возможные значения “lowerLetter“, “upperLetter” или “symbol“) и возвращает случайный символ.

Эффект перемешивания символов на jQuery

Конечно, можно использовать один набор символов для замены. Но такое разделение создает более привлекательный эффект.

Теперь рассмотрим плагин полностью, каждая функция описана в коде, по этому уделять этому более глубокий анализ не требуется:

Тут следует обратить внимание на некоторый нюанс. Плагин берет содержание элемента DOM, для которого он был вызван, или значение свойства text, если оно передано в качестве аргумента. Затем строка разделяется на символы и определяется их тип. Функция тасования использует setTimeout() для вызова самой себя и меняет случайным образом строку, обновляя элемент DOM на каждом шагу.

assets/js/script.js

В демонстрации реализована возможность ввода текста, и вывода результата. Выше приведен код как эта функция реализована. Вот и все. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.