Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Наши скрипты > ТТТ: jQuery плагин анимации текста


Автор: contorra 2.10.2014, 13:23
Рабочее название - TTT, или Тасующаяся Трансформация Текста. Этот плагин позволяет сменить один текст на другой посредством событий "клика" или "наведения" на сам объект, либо любой другой, с эффектом трансформации каждого символа. Каждый символ текущего текста двигается по кратчайшему пути в массиве символов своего типа (заглавные, строчные буквы, цифры, знаки пунктуации и прочие) и останавливается при достижении конечного результата. В результате мы наблюдаем, как из хаоса вращающихся символов постепенно проявляется заданный текст. Демо http://contorra.ru/ru/ttt-jquery-plagin-animacii-teksta.

Инструкция по установке:
  1. подключить jQuery
  2. http://contorra.ru/sites/default/files/ttt-1.0.min.js или скопировать в примере выше и подключить после jQuery (следите, чтобы русские символы не перекодировались браузером при скачивании)
  3. добавить в html объект, содержащий текст, дата атрибут data-ttt-new с текстом к которому он будет трансформирован. Например: 
    Код
    <div data-ttt-new="Будущий текст">Базовый текст</div>
  4. вызвать плагин TTT на обрабатываемый объект:
Код

$(document).ready(function() {
    $('div').ttt();
});

И все, по стандарту при наведении на этот объект, его текст сменится на новый, а при потере наведения - вернется на исходный, со скоростью 60 fps.

Также существует ряд настроек:
  • задать объект для вызова события: 'btn':'селектор'
  • задать тип события по клику: 'event':'click'
  • скорость смены символов: 'fps':любое число кадров в секунду

Например:
Код

$('div').ttt({
    'btn':'div',
    'event':'click',
    'fps':15
});

Пользовательская функция callback в данной версии не реализована.

Автор: ksnk 2.10.2014, 15:48
По ссылке "Демо" демки нет.

Добавлено через 3 минуты и 56 секунд
А, не! Оказывается - http://jsfiddle.net/eymf5mpt/light/
Кто еще нашел?  smile 

Автор: sQu1rr 6.11.2014, 13:56
Цитата(contorra @  2.10.2014,  13:23 Найти цитируемый пост)
Рабочее название - TTT

Trouble in Terrorist Town

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)