Эффект печатающегося текста на jquery-bubble-text

5179

Эффект динамически печатающегося текста может использоваться во многих веб проектах от сайтов визиток до сложных Интернет магазинов, такие эффекты придают красоты и стильности сайту, а также показывают ваш профессиональный уровень созданного вами проекта.

Вначале нужно подключить библиотеку jquery.bubble.text.js

Пример №1 - обычного появляющегося текста в виде печатающегося курсора:

HTML код:

CSS код:

JavaScript код:
Пример №2 - обычного появляющегося текста в виде печатающегося курсора:

Фраза 1

HTML код:

CSS код:

JavaScript код:

Настройки:

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();