Анимация набора текста на JQuery плагине — TypeIt

Довольно часто чтобы придать своеобразную стилистику для вашего сайта мы приходим к использованию различных библиотек, которые позволяют добавлять крутейшие эффекты для вашего проекта. Львинная доля эффектов приходится на возможность использования JQuery-плагинов, и сегодня мы кратко рассмотрим библиотеку TypeIT. TypeIT позволяет анимировать набор текста на странице вашего сайта. Ну вот представьте, вы набираете какой-то текст в поле ввода, мерцает курсор, и идет набор, в том виде как мы это привыкли видеть когда набирает текст в поле ввода. Только здесь уже будет работать скрипт, который вы уже предварительно настроили, визуально преподнести такой эффект можно очень красиво.

Перед использованием библиотеки разумеется её предварительно следует подключить на своей странице. Рекомендуемый метод подключения плагина TypeIT (как указано в документации) это посредством CDN. Разумеется, можно размещать эти файлы и на своих серверах, ничего страшного в этом нет.
Подключаем JQuery & TypeIt

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> 
<script src="https://cdn.jsdelivr.net/jquery.typeit/4.4.0/typeit.min.js"></script>

После того как вы подключили плагин, необходимо на странице разместить элемент, в котором будет анимироваться набор текста, в нашем случае элементом будет блок div.

Размещаем элемент на странице

<div id="element"></div>

После этого мы можем делать инициализацию плагина, с необходимыми параметрами.
Запуск плагина

$('#element').typeIt({
     // options
});

Настраивать анимацию можно довольно гибко, ниже мы рассмотрим несколько примеров его использования, кроме того для более полного описания параметров вы можете покопаться в документации на официальном сайте. Теперь давайте приступим к примерам.

Простой пример использования

<p id="example1"></p> 

$('#example1').typeIt({
     strings: 'This is a simple string.',
     speed: 50,
     autoStart: false
});

В итоге получаем такой результат:

Пример с несколькими строками, заменяющие друг друга

<p id="example2"></p> 

$('#example2').typeIt({
     strings: ["This is a great string.", "But here is a better one."],
     speed: 50,
     breakLines: false,
     autoStart: false
});

Смотрим что получилось:

Получилось здорово, давайте рассмотрим ещё один пример.

Пример с несколькими строками, с переносом на новую строку

<p id="example3"></p> 

$('#example3').typeIt({
     strings: ["This is a great string.", "And here we have another great string.."],
     speed: 50,
     autoStart: false
});

Получаем такой вид:

Как вы видите, анимируется набор текста, с переносом строки, очень интересный эффект. Теперь попробуем сделать анимацию более динамичную и более похожую на традиционный набор текста простым человеком.

Пример с динамичным набором, с корректировкой строки

<p id="example4"></p> 

$('#example4').typeIt({
     speed: 50,
     autoStart: false
})
.tiType('Wll')
.tiPause(500)
.tiDelete(2)
.tiType('ell, ')
.tiPause(1000)
.tiType('I guess I\'m typing..')
.tiBreak() .tiPause(750)
.tiType(' but I don\'t really know what to say')
.tiSettings({speed: 700})
.tiType('...')
.tiPause(750)
.tiSettings({speed: 50})
.tiDelete()
.tiType('IS THAT SO <strong>WRONG??</strong>');

В результате получаем такую анимацию:

Получилось здорово, особенно радует возможность гибкой настройки параметров. На странице сайта вы так же можете настроить параметры для вашего плагина посредством специальной формы, и просмотреть анимацию которая получилась.

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