Установка:
Добавляем на сайт бибилиотеку jQuery, скрипт jquery.bubble.text.js и два свойства:
1 2 3 4 5 |
var properties = { element: $element, newText: 'new Text', }; bubbleText(properties); |
properties.element
- элемент в котором будут печататься фразы
properties.newText
- текстовая фраза
Демо:
1 |
<div id="bubble-1"></div> |
1 2 3 4 5 6 7 |
#bubble-1 { font-size: 16px; font-family: Verdana, sans-serif; line-height: 30px; height: 140px; padding: 20px 10px; } |
1 2 3 4 5 6 7 8 9 10 |
$(document).ready(function() { var $element = $('#bubble-1'); var newText = 'Печатающийся текст'; bubbleText({ element: $element, newText: newText, speed: 3000, repeat: Infinity, }); }) |
1 |
<div id="bubble-2">Фраза 1</div> |
1 2 3 4 5 6 7 8 9 |
#bubble-2 { font-size: 26px; font-family: 'Roboto', sans-serif; color: #337AB7; font-weight: bold; display: block; line-height: 66px; padding: 0 10px; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$(document).ready(function() { var $element = $('#bubble-2'); var phrases = [ 'Фраза 2', 'Фраза 3', 'Фраза 4', 'Фраза 5', ]; var index = -1; (function loopAnimation() { index = (index + 1) % phrases.length; bubbleText({ element: $element, newText: phrases[index], letterSpeed: 70, callback: function() { setTimeout(loopAnimation, 1000); }, }); })(); }); |
Настройки:
-
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
А как сделать разный текст на плейсхолдер поиска?