Pull to refresh

ТТТ: jQuery-плагин анимации текста от Contorra

CSSJavaScriptjQuery
Рабочее название — 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 в данной версии не реализована.
---
Оригинал статьи
Tags:jqueryjquery pluginанимация текстаховерcallback
Hubs: CSS JavaScript jQuery
Total votes 30: ↑17 and ↓13 +4
Views8.4K

Popular right now

Frontend Developer (JS/jQuery/CSS/Webasyst)
from 100,000 ₽WebasystМоскваRemote job
Frontend разработчик
from 200,000 ₽СберМоскваRemote job
Frontend-разработчик
from 120,000 to 180,000 ₽BazonНовосибирск
Frontend-разработчик
from 60,000 to 130,000 ₽ФЦТ | Моя РоссияRemote job
Frontend-разработчик
from 80,000 to 100,000 ₽AristosМоскваRemote job

Top of the last 24 hours