Как сделать анимацию набора текста на jQuery. Обзор библиотеки TypeIt

Всем привет, сегодня я вас научу как делать анимацию набора текста. Мы будем использовать специальную библиотеку для создания данного эффекта. Данный скрипт будет написал с помощью библиотеки jQuery.

Первым делом подключаем библиотеку jQuery и библиотеку
TypeIt которая создает анимацию набора текста.

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <!--Подключаем jQuery-->
<script src="https://cdn.jsdelivr.net/jquery.typeit/4.4.0/typeit.min.js"></script> <!--Подключаем TypeIt--> 

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

<p id="prog_time"></p>

Заметьте что блок с текстом изначально должен быть пустым. Текст задается в скрипте.

После этого нужно просто добавить небольшой скрипт. Скрипт необходимо добавлять после блока с текстом, в самом низу.

$('#prog_time').typeIt({
   strings: 'Prog-Time - самый лучший сайт о программирование!',
   speed: 50, //скорость анимации
   autoStart: false /*если true то анимация начнется сразу после загрузки страницы, если false, то только когда блок будет в зоне видимости*/
}); 

По сути это все. Вы можете добавить этот код и скрипт будет работать.

Теперь давайте рассмотрим дополнительные параметры, которые вы можете прописать для улучшения анимации.

Дополнительные параметры

strings — задает текст который нужно вывести

Текст нужно писать в кавычках. Так же в дальнейшем вы будем добавлять дополнительные значения для изменения вывода текста.

strings: "Это мой пример текста"

Так же текст можно прописывать с помощью дополнительного метода .tiType('Текст который будет выводиться')

$('.prog_time').typeIt({
      speed: 50,
      autoStart: false
 }).tiType('Текст который будет выводиться');

Скорость воспроизведения анимации

Скорость задается с помощью параметра speed в миллисекундах.

speed: 60

Для регулирования скорости анимации, вы так же можете использовать дополнительный метод .tiSettings({speed: 700}).

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

 $('.prog_time_speed').typeIt({      
      loop: true,      
      autoStart: false 
}).tiSettings({speed: 100}) 
  .tiType('Текст который будет медленно появляться и быстро удаляться')    
  .tiSettings({speed: 10}); 

Повтор

Используя параметр loop вы указываете что текст будет, после воспроизведения удаляться и вновь воспроизводиться.

$('.prog_time').typeIt({
      strings: ["Этот текст удаляется и вновь появляется!"],
      speed: 50,
      loop: true,
      autoStart: false
 });

Пауза перед удаление

Для создания паузы перед удалением необходимо добавить дополнительный метод — tiPause(). В качестве параметра передается время паузы в миллисекундах.

$('.prog_time').typeIt({
      speed: 50,
      loop: true,
      autoStart: false
 }).tiType('Сейчас будет пауза!')
.tiPause(2000);

Удаление нескольких символов

Для удаления нескольких символов пропишем следующий код. Метод .tiDelete( ) удаляет указанное количество символов.

$('.prog_time').typeIt({
      speed: 50,
      loop: true,
      autoStart: false
 }).tiType('Давайте удалим 15 символов')
.tiDelete(15)
.tiPause(2000);

Теперь давайте попробуем удалить, а затем дописать текст.

$('.prog_time_replay2').typeIt({
      speed: 100,
      loop: true,
      autoStart: false
 })
 .tiType('Давайте удалим 15 символов')
 .tiPause(2000)
 .tiDelete(15)
 .tiType('Давайте удалим,а потом допишем')
 .tiPause(2000);

Вывод нескольких строк

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

$('.prog_time').typeIt({
   strings: ['Расписание дня', "1) Проснулся", "2) Программирую", "3) Ложусь спать"],
   speed: 50,
   loop: true,
   autoStart: false
 });

Один текст заменяется другим

Так же библиотека позволяет выводить текст, а затем заменять его другим. Для это нужно прописать строки в параметре strings в квадратных скобках и в кавычках, и добавить дополнительный параметр breakLines.

$('.prog_time_breakLines').typeIt({
      strings: ["Первый текст", "Второй текст"],
      speed: 50,
      breakLines: false,
      autoStart: false
 });

Добавляем стили для текста

Здесь все так же просто. Внутри параметра strings текст заключим в теги.

$('.prog_time2').typeIt({
      strings: ["<b>Я не жирный, просто начертание широкое</b>", "<i>Курсивчик</i>"],
      speed: 50,
      loop: true,
      autoStart: false
 });