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

Яндекс.Метрика