Перейти к основному содержанию

ТТТ.js: jQuery плагин анимации текста

Рабочее название - TTT, или Тасующаяся Трансформация Текста. 
Разработан по спецзаказу digital-агенства Contorra.

Этот плагин позволяет сменить один текст на другой посредством событий "клика" или "наведения" на сам объект, либо любой другой, с эффектом трансформации каждого символа. Каждый символ текущего текста двигается по кратчайшему пути в массиве символов своего типа (заглавные, строчные буквы, цифры, знаки пунктуации и прочие) и останавливается при достижении конечного результата. В результате мы наблюдаем, как из хаоса вращающихся символов постепенно проявляется заданный текст.

Демо:

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

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

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

Также сущесвует ряд настроек:
- задать объект для вызова события: 'btn':'селектор'

- задать тип события по клику: 'event':'click'

- скорость смены символов: 'fps':любое число кадров в секунду

Например:

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

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


28 сентября 2014

Комментарии

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

Что мы делаем?

Делаем УДОБНЫЕ сайты, разрабатываем фирменный стиль, продвигаем сайты в поисковиках и занимаемся контекстной рекламой.