Заглавные буквы обеспечивают прокручиваемое текстовое поле для вашего Веб-сайт который привлекает читателей полезными выдержками из содержание. Их также называют тиккерами (или тиккерами новостей) и часто используют для отображения постоянного потока обновлений новостей вверху или внизу страницы. . Обычно анимация прокрутки выполняется с помощью одной строки содержание в цикле, чтобы информация отображалась повторно. К сожалению, <marquee>
html устарел, поэтому в наши дни мы полагаемся на CSS и JavaScript для создания шатров. Однако с помощью Divi вы можете создать простой прямоугольник выбора, не беспокоясь о пользовательском коде.
В этом уроке мы объясним, как легко создать простой текст выделения с помощью Divi. Мы даже увидим, как приостанавливать анимацию прокрутки текста при наведении курсора и как добавить большой прокручиваемый текст в качестве уникального элемента дизайна для ваших заголовков.
Давайте начнем.
обследование
Что нужно для начала
Для начала вам необходимо следующее:
- Le Диви тема установлен и активен
- Новая страница, созданная для создания с нуля внешнего интерфейса (визуальный конструктор)
После этого у вас будет чистый холст, чтобы начать проектирование в Divi.
Начало зачатия
В этом первом примере мы создадим простой текстовый прямоугольник для одной строки текста. Для этого мы зададим строке максимальную ширину со скрытым переполнением. Затем мы собираемся добавить циклическую анимацию слайдов в текстовый модуль, содержащий строку текста, чтобы она многократно скользила в строку, как прямоугольник.
Вот как это сделать.
Начните с создания регулярного раздела со строкой столбца.
Затем, перед добавлением модуля, обновите строку с фиксированной шириной, теневым полем и радиусом, как показано ниже:
- Максимальная ширина: 200px
- Обивка: 10px вверху, 10px внизу
- Круглые углы: 10px
- Box Shadow: см. Снимок экрана
- Горизонтальное переполнение: скрыто
- Вертикальный перелив: скрытый
Добавить текстовый модуль
Когда строка будет завершена, добавьте в нее новый текстовый модуль.
Затем обновите содержание тела одной строкой текста. А пока убедитесь, что строка текста не разделяется на другую строку.
- Тело: «Это предложение»
Дизайн текстового модуля
Обновите параметры дизайна текстового модуля следующим образом:
- Маржа: -100% слева, 100% справа
Таким образом текстовый модуль размещается за пределами левой части строки. Поскольку скрытая видимость линии скрыта, модуль будет скрыт, пока мы не добавим анимацию, чтобы сделать его видимым.
- Стиль анимации: слайд
- Направление анимации: вправо
- Продолжительность анимации: 5000 мс
- Интенсивность анимации: 100%
- Начальная непрозрачность анимации: 100%
- Анимация кривой скорости: линейная
- Повтор анимации: петля
Результат
Давайте посмотрим на результат сейчас.
Создание более длинных текстовых строк
В простом дизайне выделенного текста выше мы ограничили ширину текстовой строки такой же шириной, как и сама линия. Однако, если мы хотим сделать более длинную строку текста той же ширины, нам нужно будет немного изменить настройки.
Сначала в текстовом модуле и замените тело текста следующим:
Это этап со ссылкой
Увеличьте ширину и поля, чтобы уместить самую длинную строку текста
Как вы могли заметить, текст разделен на три строки вместо одной.
Следовательно, нам нужно настроить поля и интенсивность анимации.
- Ширина: 207%
- Маржа: -207% слева, 207% справа
- Интенсивность анимации: 75%
Хитрость здесь в том, чтобы увеличить ширину и обновить значения полей, чтобы оставалось достаточно места для одной строки текста. Затем отрегулируйте интенсивность анимации, чтобы не было большого перерыва между зацикливанием анимации.
Результат
Вот окончательный результат.
Приостановить анимацию выделенного текста при наведении курсора
Поскольку эта выделенная область содержит ссылку, пользователям будет сложно щелкнуть ссылку во время движения. Однако мы можем добавить небольшой фрагмент css в текстовый модуль, который будет приостанавливать анимацию при наведении курсора.
Добавить фрагмент CSS для приостановки анимации при наведении курсора
Чтобы добавить фрагмент css, откройте настройки текстового модуля и добавьте следующий пользовательский код CSS в основной элемент под вкладкой наведения :
анимация-состояние воспроизведения: приостановлено;
Конечный результат
А теперь посмотрим на конечный результат. Обратите внимание, что анимация текста останавливается при наведении курсора на текст, позволяя пользователю щелкнуть ссылку.
Это все для этого урока, я надеюсь, что он научил вас добавлять прокручиваемый текст в Divi.
Я считаю, что версия слишком сильно изменилась со времени этого урока и что больше невозможно гордиться вашей статьей.
Да, я тоже так думаю. Мы обновим его.
Привет,
Спасибо за этот урок, это именно то, что мне нужно!
Однако я проделал точно такую же конфигурацию для линии и модуля, но, к сожалению, это не работает, а может быть и больше.
Это тоже так?
Заранее благодарим вас за возвращение.
Алексис v
Спасибо за этот урок, очень четкий и точный. Отлично сработано !