Всем привет, сегодня я вас научу как делать анимацию набора текста. Мы будем использовать специальную библиотеку для создания данного эффекта. Данный скрипт будет написал с помощью библиотеки 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
});