Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.10.2014, 13:20
Новичок на форуме
Отправить личное сообщение для contorra Посмотреть профиль Найти все сообщения от contorra
 
Регистрация: 02.10.2014
Сообщений: 1

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

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

Инструкция по установке:
  1. подключить jQuery
  2. скачать файл плагина (2 кб) или скопировать в примере выше и подключить после 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 в данной версии не реализована.
Ответить с цитированием
  #2 (permalink)  
Старый 02.10.2014, 17:40
Аватар для Duda.Ml1986@gmail.com
Профессор
Отправить личное сообщение для Duda.Ml1986@gmail.com Посмотреть профиль Найти все сообщения от Duda.Ml1986@gmail.com
 
Регистрация: 01.09.2011
Сообщений: 263

Мой плагин

var text = '';

            $('div').on('mouseenter', function(){
                
                text = $(this).html();

                    setTimeout( function() {
                       $(this).html($(this).attr('data-ttt-new'));
                    } , 600)
                
            })

            $('div').on('mouseleave', function(){
               

                    setTimeout( function() {
                         $(this).html(text);
                    } , 600)
            })
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Существует ли плагин на подобие fancybox без использования jquery protexon jQuery 1 01.06.2014 18:33
Ни один скрипт и плагин не видит Jquery razorg1991 jQuery 5 30.03.2014 13:51
плагин jquery ajax upload Karabella jQuery 0 06.06.2013 20:25
Плагин jQuery form. Добавляю форму js'ом Physicist jQuery 3 21.07.2011 16:46
syncTranslate jQuery плагин Snowcore Ваши сайты и скрипты 0 20.10.2009 18:00