Как создать зону супергероя с анимированным текстом

Это руководство является дополнением к руководству, которое мы сделали несколько дней назад. Мы действительно показали вам, как добавить прокручиваемый текст в столбец на Divi. Сегодня мы покажем вам, как использовать ту же технику, чтобы добавить раздел «супергерой» (выражение, используемое для описания большой области веб-страницы, предназначенной для привлечения внимания и выделения определенных элементов) .

Давайте начнем.

Добавить предопределенный макет

Чтобы добавить макет на свою страницу, откройте меню настроек внизу конструктора Divi и щелкните значок плюса. Во всплывающем окне «Загрузить из библиотеки» выберите пакет макетов Job Recruiter. Затем щелкните, чтобы использовать макет домашней страницы.

Удалить дополнительный контент с макетом

После загрузки презентации на страницу разверните каркасное представление и удалите из презентации все содержимое, кроме полноразмерного заголовка и раздела чуть ниже него.

Создание анимации выделенного текста

Как видите, слово «наемный» уже используется как большой элемент текстового дизайна в текстовом модуле во втором разделе. Мы собираемся превратить этот текстовый мод в элемент дизайна отзывчивого текстового динамика. Чтобы сделать прямоугольник текста отзывчивым, необходимо убедиться, что строка и текстовый модуль занимают всю ширину окна браузера. Мы можем сделать это, используя 100% ширину. Затем мы можем использовать единицу длины vw для размера текста. Это сделает текст подходящим по ширине браузера. После этого мы применим те же принципы, которые мы использовали ранее, чтобы проиллюстрировать наш простой пример прокрутки текста.

Вот как это сделать.

Обновить параметры линии

Как упоминалось ранее, строка должна быть 100%, чтобы дизайн этого адаптивного выделения текста работал. Это позволяет нашему текстовому модулю использовать единицы длины vw относительно ширины браузера. Поскольку в нашем предопределенном макете уже есть линия шириной 100%, нам не нужно ничего делать.

Тем не менее, мы должны настроить остальные параметры следующим образом.

• Маржа: -24vw вниз
• Преобразовать преобразовать ось Y: -24vw
• Горизонтальное переполнение: скрыто
• Вертикальный перелив: скрытый

Отрицательное нижнее поле предназначено для удаления отрицательного пространства, которое остается каждый раз, когда мы перемещаем строку с помощью команды transform translate. И нам нужно скрыть переполнение строки для нашего текстового эффекта выделения.

Обновление текстового оформления текстового модуля

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

Откройте текстовый модуль и обновите следующее:

• Цвет текста текста: rgba (255,255,255,0.16)
• Размер текста: 36vw
• Маржа: -100% слева, 100% справа

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

Добавить анимацию в текстовый модуль

• Стиль анимации: слайд
• Направление анимации: влево
• Продолжительность анимации: 10000 мс
• Интенсивность анимации: 100%
• Анимация кривой скорости: линейная
• Повтор анимации: петля

Окончательный дизайн

Теперь проверьте окончательный дизайн.

Заключительные мысли

Текстовые поля могут быть удобным инструментом для веб-дизайна. Они не ограничиваются работой только в качестве телетайпов. Они также могут добавить интересный элемент анимации в ваш веб-дизайн. И самое приятное то, что Divi позволяет легко создавать и разрабатывать всевозможные красивые вещи. Надеюсь, этот урок поможет вам создавать простые тексты для выбора, когда они вам понадобятся.

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

За ваше здоровье!