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

Тема в разделе "JavaScript", создана пользователем contorra, 15 ноя 2014.

  1. contorra

    contorra

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

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

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

    Также существует ряд настроек:
    • задать объект для вызова события: 'btn':'селектор'
    • задать тип события по клику: 'event':'click'
    • скорость смены символов: 'fps':любое число кадров в секунду
    Например:
    $('div').ttt({
    'btn':'div',
    'event':'click',
    'fps':15});
    Пользовательская функция callback в данной версии не реализована.
     
    $iD нравится это.
  2. DragonZX

    DragonZX

    Регистрация:
    29 ноя 2014
    Сообщения:
    5
    Симпатии:
    0
    Классно, а есть информация по нагрузке на сервер/потребление ресурсов браузера?
     
  3. contorra

    contorra

    Регистрация:
    15 ноя 2014
    Сообщения:
    0
    Симпатии:
    2
    хз я такое не тестировал %) потребление как потребление, скрипт небольшой, много не думает