Пропустить

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

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

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

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

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

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

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

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

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

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

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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

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

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

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

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

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

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

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

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

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

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

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

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

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

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

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

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

Эта статья содержит комментарии 0

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

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
2 акции
доля2
чирикать
Регистрация