Печатающийся текст на jQuery

Плагин jquery-bubble-text может не только печатать текст, но и заменять его на другой.

Установка:

Добавляем на сайт бибилиотеку jQuery, скрипт jquery.bubble.text.js и два свойства:

properties.element - элемент в котором будут печататься фразы

properties.newText - текстовая фраза

Демо:

Всем привет!

Настройки:

  • speed

    Скорость от начала и до конца в миллисекундах:

    По умолчанию: 2000

  • letterSpeed

    Это свойство имеет приоритет над свойством speed. Если выбрать параметр letterSpeed, общее время анимации будет пропорционально длине старого и нового текста.

  • callback

    Функция после завершения анимации.

    Пример: callback = function() {};

  • proportional

    Свойство по умолчанию имеет значение true. Если исходный текст "abcd", а новый текст "ef", анимация будет:

    удаление "a",
    удаление "b",
    добавление "e",
    удаление "c",
    удаление "d",
    добавление "f".

    Но можно поставить шаги добавления и удаления по одному:

    удаление "a",
    добавление "e",
    удаление "b",
    добавление "f".
    удаление "c",
    удаление "d".

    Для это нужно установить настройку: proportional = false;

  • repeat

    Кол-во повторов. repeat = Infinity; - Бесконечное повторение.

    По умолчанию: 0

  • timeBetweenRepeat

    Задержка перед повторным запуском в секундах

    По умолчанию: 1.5

Методы:

Плагин имеет 3 функции для управления

  • restart

    Если нужно перезагрузить анимацию, можно использовать:

    var ctrl = bubbleText(options);
    ctrl.restart();

    В итоге будет мгновенно установлен старый текст, и анимация начнется заного.

  • finish

    Если нужно закончить анимацию, можно использовать:

    var ctrl = bubbleText(options);
    ctrl.finish();

  • stop

    Если нужно остановить анимацию, можно использовать:

    var ctrl = bubbleText(options);
    ctrl.stop();

Если во всех этих настройках и методах нет никакой необходимости, а нужно просто напечатать текст, то можно воспользоваться более простым и даже более красивым вариантом.

jquery-bubble-text на github
Автор: Guedes, Washington

Смотрите также:

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

Ваш комментарий отправлен!

Комментарии:

  • Сергей:

    А как сделать разный текст на плейсхолдер поиска?

    Ответить