April 15, 2020

[Фича 5] Добавляем к тексту эффект печатной машинки

Всем привет! В перерыве между уроками решил сделать урок про небольшой, но очень прикольный эффект - эффект печатной машинки.

Установим нужные блоки, настроим их, посмотрим на результат. Приятного изучения!)

Выглядит это примерно так

Шаг 1. Устанавливаем блок

Идём в раздел "Другое" и ищем блок Т635 - Эффект печатной машинки

Устанавливаем его на сайт.

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

Цвет текста и цвет курсора: я сделаю белым. Параметр должен быть всем понятен.

Скорость печати: "Чем меньше значение, тем быстрее будет набор, пример значения для ввода: 40" - экспериментируйте, я поставлю значение 40.

Задержка перед удалением фразы: плагин перебирает, а точнее перепечатывает несколько фраз. Алгоритм такой - напечаталась одна фраза, удалилась, напечаталась следующая. Задержка - это время между сменами фраз. Я поставлю 600.

Сохраняем и закрываем.

Переходим к настройкам контента блока

Тут нас интересуют данные поля. Вписываем текст, который вы хотите (только те фразы, которые будут меняться) и id блока в котором находится блок текста.

ВНИМАНИЕ! Чтобы узнать id блока нам нужно перейти к основным параметрам блока, пролистать в самый низ и именно там указан id блока.

Вот так выглядят поля контента блока эффекта у меня.

Переходим к блоку с самим текстом

Я буду работать с главным блоком. Перехожу к настройкам контента и ищу где можно сменить текст. Я всё ещё работаю с сайтом ресторана из предыдущих уроков.

И так. Главный момент. После текста, который меняться не будет (в моём случае это текст "Главный ресторан Москвы" вставляем символ "|"

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