Анимация набора текста

Как сделать анимацию набора текста на 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
});

На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

Оставить комментарий

avatar
  Подписаться  
Уведомление о