Заглавные буквы обеспечивают прокручиваемое текстовое поле для вашего Веб-сайт который привлекает читателей полезными выдержками из содержание. Их также называют тиккерами (или тиккерами новостей) и часто используют для отображения постоянного потока обновлений новостей вверху или внизу страницы. . Обычно анимация прокрутки выполняется с помощью одной строки содержание в цикле, чтобы информация отображалась повторно. К сожалению, <marquee>html устарел, поэтому в наши дни мы полагаемся на CSS и JavaScript для создания шатров. Однако с помощью Divi вы можете создать простой прямоугольник выбора, не беспокоясь о пользовательском коде.

В этом уроке мы объясним, как легко создать простой текст выделения с помощью Divi. Мы даже увидим, как приостанавливать анимацию прокрутки текста при наведении курсора и как добавить большой прокручиваемый текст в качестве уникального элемента дизайна для ваших заголовков.

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

обследование

Превью анимации Divi

Что нужно для начала

Для начала вам необходимо следующее:

  1. Le Диви тема установлен и активен
  2. Новая страница, созданная для создания с нуля внешнего интерфейса (визуальный конструктор)

После этого у вас будет чистый холст, чтобы начать проектирование в Divi.

Начало зачатия

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

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

Начните с создания регулярного раздела со строкой столбца.

Определите строку diviЗатем, перед добавлением модуля, обновите строку с фиксированной шириной, теневым полем и радиусом, как показано ниже:

  • Максимальная ширина: 200px
  • Обивка: 10px вверху, 10px внизу
  • Круглые углы: 10px
  • Box Shadow: см. Снимок экрана
  • Горизонтальное переполнение: скрыто
  • Вертикальный перелив: скрытый

Конфигурация стиля линии Divi

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

Когда строка будет завершена, добавьте в нее новый текстовый модуль.

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

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

  • Тело: «Это предложение»

Дизайн текстового модуля

Обновите параметры дизайна текстового модуля следующим образом:

  • Маржа: -100% слева, 100% справа

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

Изменить выравнивание divi

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

Конфигурация анимации текстового модуля Divi

Результат

Давайте посмотрим на результат сейчас.

Результат анимации divi 1Создание более длинных текстовых строк

В простом дизайне выделенного текста выше мы ограничили ширину текстовой строки такой же шириной, как и сама линия. Однако, если мы хотим сделать более длинную строку текста той же ширины, нам нужно будет немного изменить настройки.

Сначала в текстовом модуле и замените тело текста следующим:

Это этап со ссылкой

Предложение со ссылкой на divi

Увеличьте ширину и поля, чтобы уместить самую длинную строку текста

Как вы могли заметить, текст разделен на три строки вместо одной.

Divi фраза wordpress

Следовательно, нам нужно настроить поля и интенсивность анимации.

  • Ширина: 207%
  • Маржа: -207% слева, 207% справа
  • Интенсивность анимации: 75%

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

Результат

Вот окончательный результат.

Результат анимации divi 2

Приостановить анимацию выделенного текста при наведении курсора

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

Добавить фрагмент CSS для приостановки анимации при наведении курсора

Чтобы добавить фрагмент css, откройте настройки текстового модуля и добавьте следующий пользовательский код CSS в основной элемент под вкладкой наведения :

анимация-состояние воспроизведения: приостановлено;

Настройка анимации наведения Divi

Конечный результат

А теперь посмотрим на конечный результат. Обратите внимание, что анимация текста останавливается при наведении курсора на текст, позволяя пользователю щелкнуть ссылку.

Результат анимации divi анимация прервана

Это все для этого урока, я надеюсь, что он научил вас добавлять прокручиваемый текст в Divi.