Скрипт «Печатающийся текст» создает эффект набирающегося текста. Продукт имитирует процесс написания слов, предложений человека. В нем предусмотрена возможность настройки скорости (темпа) набора текста. При создании эффекта печатающегося текста скрипт соблюдает все указанные паузы. Анимация набора текста — это увлекательный и современный способ подвести клиента к совершению определенных действий!
Печатающийся текст собран на базе библиотеки
https://github.com/mattboldt/typed.js/
http://www.mattboldt.com/typed.js/ (примеры)
Рекомендую скачать библиотеку typed.min.js на свой хостинг.
Исходный код
В настройках страницы добавьте новый плагин и назовите его «Печатающийся текст»
Откройте файл body.html в текстовом редакторе, например, в Блокнот.
Скопируйте в раздел BODY исходный код из файла body.html
Настройка
Полная документация по настройке параметров библиотеки находится на странице
http://www.mattboldt.com/typed.js/docs/
В нашем случае мы задали скорость набора через typeSpeed и задержку перед удалением текста через backDelay. Значения в миллисекундах.
Через опцию strings передаем массив строк, которые хотим увидеть в конечном счете. Обратите внимание, что строки перечислены через запятую. А в самом тексте есть значения ^300, которая означает задержку в этом месте на 300 миллисекунд. Его можете проставлять в любом месте и с любым значением.
Редактор
В редакторе Платформы добавьте Текст
откройте исходный код текста
и пропишите class="printtext" в тот элемент, куда хотите его выводить.
Например
1 |
<span class="printtext">тест</span> |
Внимание! Редактор Платформы автоматически удаляет пустые элементы.
Если при загрузке хотите пустой текст по умолчанию, тогда добавьте неразрывный пробел.
Таким образом получите такую конструкцию
1 |
<span class="printtext"> </span> |
Опубликуйте страницу и проверяйте.