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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Я надеюсь услышать от вас в комментариях.

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