1. Подключаем библиотеку Typed.js.
Библиотека подключается в редакторе материалов любой системы управления контентом (CMS). Для корректной вставки кода в материал CMS Joomla, для подключения к библиотеке Typed.js, необходим плагин Sourcerer. Sourcerer - это плагин для Joomla, который поможет вам вставить любой код (PHP, HTML, CSS, JavaScript) прямо в ваш контент и не только статьи, но и в разделы, категории, компоненты, модули, мета теги, и т.д.
Первый способ подключения. Загружаем библиотеку из CDN.
<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
Второй способ подключения. Загружаем библиотеку на свой сервер в папку своего шаблона и прописываем к нему путь. Например:
<script src="https://webservice.kz/templates/cassiopeia_webservice/js/typed.umd.js"></script>
2. Запускаем анимацию с подключением к библиотеке Typed.js.
<!-- Элемент, содержащий анимированный ввод текста -->
<span id="element"></span>
<!-- Загрузка библиотеки из CDN -->
<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
<!-- Настройка и запуск анимации! -->
<script>
var typed = new Typed('#element', {
strings: ['<i>Первый</i> какой-то текст.', '<i>Второй</i> какой-то текст.', '<i>Третий</i> какой-то текст.'],
typeSpeed: 50,
loop: true,
typeSpeed: 100,
startDelay: 500,
backSpeed: 50,
});
</script>
"Элемент, содержащий анимированный ввод текста", "Загрузка библиотеки из CDN", "Настройка и запуск анимации!" - всё это прописывается в материале через плагин Sourcerer.
Основные параметры инициализации плагина Typed.js:
$(".element").typed({
typeSpeed: 0, // Скорость печати
backSpeed: 0, // Скорость удаления
startDelay: 0, // Задержка перед стартом анимации
backDelay: 500, // Пауза перед удалением
loop: false, // Повтор (true или false)
loopCount: false, // Число повторов, false = бесконечно
showCursor: true, // Отображение курсора
attr: null, // Атрибут
callback: function(){ } // Функция вызываемая после окончания работы плагина
});
Подробнее: GitHub | Documentation | View original demo | View mattboldt.com