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

    Рабочее название — 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 в данной версии не реализована.
    ---
    Оригинал статьи
    Поделиться публикацией
    Похожие публикации
    Ой, у вас баннер убежал!

    Ну. И что?
    Реклама
    Комментарии 12
    • +1
      реклама?
      • –1
        да нет, скорее опытом поделились. вдруг кому-то интересно будет у себя такое реализовать.
      • +2
        Не знаю как вам, но эта либа julian.com/research/blast/ в связке с julian.com/research/velocity/ дает невероятно крутые возможности для игр с текстом.
      • +6
        По-моему оно сквернословит в процессе анимации…
        • +2
          Надеюсь никогда не увидеть такое. Без обид, но это «привет из нулевых», когда все «блымкало». Разница, правда, лишь в том, что раньше народ с чистым js игрался, а теперь библиотеки для этого нужны.
          • 0
            Без обид, но мы так не считаем. Вот сайт канадской веб-студии Akufen — а у них 2 проекта получили Site of the Day в Awwwards, и еще 2 — Special mention. Наведите на пункты меню вверху. Это похоже на привет из нулевых?
            • +2
              Но у них выглядит приятно, а у вас «так себе» (мягко говоря).
              • 0
                Реализуем на сайте — сразу покажем. Постараемся, чтоб тоже приятно было :)
              • 0
                Каждому свое, но, отвечая на вопрос — да, похоже. Когда я давным-давно наткнулся на «100500 эффектов для вашего сайта», там было много похожего: и перемешивание (вроде вашего), и подскоки, и т.п. Я не спорю, что все новое — это хорошо забытое старое, но только не во времена, когда модно наоборот все минимизировать и упрощать.
                В любом случае, спасибо Вам, что поделились наработками. Кому-то может это действительно понадобится.
            • +1
              Всё просто:
              1. не заменяйте пробел символом
              2. подберите символы максимально похожие друг на друга для замены, например, чтобы i не менялась на w и поменьше спецсимволов (или вообще убрать)
              2.2 либо подобрать наборы замен так, чтобы не было рывков, например от «крупных» букв к более «мелким»: W — H — I, в любом случае случайные символы не прокатят, нужно составлять наборы вручную.
              3. что-то надо сделать с анимацией для более плавного перехода
              • 0
                4. Изменяйте количество символов постепенно. Переход с «Не нажата»[9] в «Нажата»[6] заметно дёргается в первом кадре.

              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

              Самое читаемое