Text Motion Element

Name: MSG Text Motion Element
Author: MSGRu

Показывайте несколько вариантов внутри одной фразы: Text Motion Element добавляет 25 эффектов входа и выхода, индивидуальные тайминги, отдельные размеры для desktop и mobile и доступное описание.

PHP 8.1+

YOOtheme Pro 5

Joomla 6

Скачать бесплатно

Поддержка

Одна фраза — несколько смысловых акцентов

Text Motion Element меняет только смысловой фрагмент внутри одной фразы. Постоянные prefix и suffix остаются на месте, а каждая запись получает собственные вход, выход, длительность показа и типографику.

Сцена заранее принимает размеры самой крупной записи, поэтому соседний контент не сдвигается при смене слов.

Схема Text Motion Element: постоянные prefix и suffix окружают сменяемые записи с отдельными эффектами входа и выхода

Сцена сохраняет геометрию

Runtime измеряет все записи и обновляет размер сцены через ResizeObserver. Длинное слово, другая насыщенность или мобильный размер не заставляют строку «прыгать» на каждом переходе.

На экранах до 639 px применяются отдельные Phone Size для prefix, suffix и каждой записи.

Когда текст должен меняться, а структура — оставаться

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

Оффер в первом экране

Prefix фиксирует обещание, записи меняют результат или аудиторию, Suffix завершает фразу.

Направления и компетенции

Каждая запись показывает отдельную услугу или специализацию и получает свой motion-профиль без дублирования всей секции.

Динамический контент

Prefix, suffix, доступное описание и текст записи поддерживают source mapping. Контент можно связать с полями Joomla, когда структура данных это допускает.

Акцент внутри редакционного блока

Inline и stacked layout позволяют встроить сменяемую часть в строку или вынести её на отдельный уровень без произвольного CSS.

Text Motion Element в работе

В демонстрации prefix и suffix остаются статичными, а шесть записей используют Fade, Slide Up, Flip X, Typewriter, Letter Wave и Glitch. Наведите указатель на элемент, чтобы проверить штатную паузу.

Мы создаём сайты, расширения, интеграции, интерфейсы, сценарии и решения для Joomla и YOOtheme Pro.

Контейнер, записи и цикл перехода

msg_motion_text управляет общей фразой и playback. Дочерние msg_motion_text_item хранят текст, типографику, эффекты и тайминги каждой записи.

1. Контейнер

Prefix и suffix остаются статичными; layout, alignment и HTML Element задаются один раз для всей фразы.

2. Сцена

Все записи измеряются, после чего stage резервирует максимальные inline- и block-size и отслеживает изменение размеров.

3. Запись

У каждой записи свои Entrance Effect, Exit Effect, две длительности, Visible Time и desktop/phone типографика.

4. Контроллер

Цикл выполняет hold → exit → activate → entrance. Random Order строит один порядок и проходит все записи до нового круга.

Все публичные настройки Text Motion Element

Справочник соответствует element definitions версии 1.0.0. Группы и порядок повторяют Builder; значения options приведены в сохранённом формате.

Parent — Content

Prefix `prefix`	Статический текст перед сменяемой записью. Поддерживает dynamic source; пустое значение не выводит узел.
Suffix `suffix`	Статический текст после сменяемой записи. Поддерживает dynamic source; пустое значение не выводит узел.
Accessible Description `accessible_label`	Единое сообщение для screen reader. Если поле пустое, runtime собирает строку из prefix, всех непустых записей через запятую и suffix. Поддерживает dynamic source.
Entries `content`	Repeatable-контейнер дочерних Motion Text Entry. Пустые записи не выводятся; без непустых записей родительский элемент не рендерится.

Parent — Settings: Layout

Layout `layout`	`inline` — default — размещает prefix, stage и suffix в строку; `stacked` располагает их вертикально.
Alignment `text_align`	Выравнивание `left` — default, `center` или `right`. Применяется к общей композиции.
Center prefix, entries and suffix vertically `vertical_center`	Доступно только при `layout=inline`. Выравнивает три части по центру вместо базовой линии; default выключен.
Content Gap `content_gap`	Расстояние между prefix, stage и suffix. Число интерпретируется как px; также поддерживаются `em`, `rem` и `%`. Пустое значение оставляет stylesheet default.
Stage Horizontal Padding `stage_padding_horizontal`	Внутреннее пространство слева и справа от самой крупной записи. Диапазон 0–200; число интерпретируется как px.
Stage Vertical Padding `stage_padding_vertical`	Внутреннее пространство сверху и снизу от самой крупной записи. Диапазон 0–200; число интерпретируется как px.
HTML Element `html_element`	Семантический контейнер: `div` — default, `p` или `h1`–`h6`. На странице должен сохраняться единственный H1 и последовательная иерархия заголовков.

Parent — Settings: Prefix Typography

Desktop Size `prefix_font_size`	Размер статической части при viewport шире 639 px. Диапазон 8–320 px; пустое значение наследует размер.
Phone Size `prefix_font_size_small`	Размер статической части при viewport до 639 px. Диапазон 8–320 px; пустое значение использует Desktop Size или наследование.
Font Family `prefix_font_family`	`inherit` — default; также доступны сохранённые значения `default`, `primary`, `secondary` и `tertiary`.
Font Weight `prefix_font_weight`	`inherit` — default или числовые значения `300`–`900`.
Color `prefix_color`	Цвет статической части. Пустое значение наследует цвет; runtime принимает hex-значения.

Parent — Settings: Suffix Typography

Desktop Size `suffix_font_size`	Размер статической части при viewport шире 639 px. Диапазон 8–320 px; пустое значение наследует размер.
Phone Size `suffix_font_size_small`	Размер статической части при viewport до 639 px. Диапазон 8–320 px; пустое значение использует Desktop Size или наследование.
Font Family `suffix_font_family`	`inherit` — default; также доступны сохранённые значения `default`, `primary`, `secondary` и `tertiary`.
Font Weight `suffix_font_weight`	`inherit` — default или числовые значения `300`–`900`.
Color `suffix_color`	Цвет статической части. Пустое значение наследует цвет; runtime принимает hex-значения.

Parent — Settings: Playback

Initial Entry `initial_index`	Нулевой индекс первой записи; default `0`. Доступен при выключенном autoplay или при последовательном порядке; runtime ограничивает индекс фактическим числом записей.
Rotate entries automatically `autoplay`	Default включён. Запускает смену, если в контейнере больше одной непустой записи.
Randomize entry order on each page load `random_order`	Доступно при autoplay; default выключен. Создаёт один случайный порядок, показывает каждую запись один раз и только затем начинает новый круг.
Continue from the first entry after the last `loop`	Доступно при autoplay; default включён. При выключении цикл останавливается после последней записи.
Pause while the pointer is over the element `pause_on_hover`	Доступно при autoplay; default включён. Сохраняет оставшееся Visible Time и продолжает после ухода указателя.
Pause while keyboard focus is inside the element `pause_on_focus`	Доступно при autoplay; default включён. Пауза действует, пока focus остаётся внутри элемента. Стандартная разметка Motion Text не создаёт фокусируемого потомка, поэтому событие возникает только при фактическом focus внутри контейнера.
Pause while the page is hidden `pause_when_hidden`	Доступно при autoplay; default включён. Использует `visibilitychange` и продолжает цикл после возврата на страницу.

Entry — Content

Text
text

Текст одной Motion Text Entry. Поддерживает dynamic source; пустая строка не выводится.

Entry — Settings: Typography

Desktop Size `font_size`	Размер записи при viewport шире 639 px. Диапазон 8–320 px; default 64 px.
Phone Size `font_size_small`	Размер записи при viewport до 639 px. Диапазон 8–320 px; default 36 px.
Font Family `font_family`	`inherit` — default; также доступны `default`, `primary`, `secondary` и `tertiary`.
Font Weight `font_weight`	`inherit` — default или числовые значения `300`–`900`.
Color `color`	Цвет отдельной записи. Пустое значение наследует цвет; runtime принимает hex-значения.

Entry — Settings: Motion

Entrance Effect `effect_in`	Эффект появления; default `fade`. Доступны 25 значений: `fade`, `slide-up`, `slide-down`, `slide-left`, `slide-right`, `zoom`, `pop`, `flip-x`, `flip-y`, `rotate`, `roll`, `blur`, `swipe`, `hover`, `focus`, `wheel`, `tap`, `clip-horizontal`, `clip-vertical`, `bounce`, `elastic`, `swing`, `typewriter`, `letter-wave`, `glitch`.
Entrance Duration `duration_in`	Длительность появления 100–3000 ms с шагом 50; default 600 ms.
Exit Effect `effect_out`	Эффект исчезновения; default `fade`. Использует тот же набор из 25 значений: `fade`, `slide-up`, `slide-down`, `slide-left`, `slide-right`, `zoom`, `pop`, `flip-x`, `flip-y`, `rotate`, `roll`, `blur`, `swipe`, `hover`, `focus`, `wheel`, `tap`, `clip-horizontal`, `clip-vertical`, `bounce`, `elastic`, `swing`, `typewriter`, `letter-wave`, `glitch`.
Exit Duration `duration_out`	Длительность исчезновения 100–3000 ms с шагом 50; default 450 ms.
Visible Time `hold`	Время показа записи до начала выхода: 250–30000 ms с шагом 50; default 2000 ms.

Advanced

Dynamic Content `source`	Штатная привязка Builder к dynamic source. В элементе source поддерживают prefix, suffix, accessible description и Text дочерней записи.
ID / Classes / Attributes `id, class, attributes`	Штатные advanced-атрибуты Builder. В layout этой страницы произвольные Classes и Attributes не используются.
CSS `css`	Поле дочерней записи поддерживает селектор `.el-item`, который plugin автоматически ограничивает этой записью. В layout страницы custom CSS не используется.

Движение не подменяет содержание

Визуальная сцена скрыта от assistive technology. Screen reader получает одно стабильное описание, а не поток объявлений при каждой смене записи.

Доступное описание

Заполните Accessible Description как цельное сообщение. Если поле пустое, элемент объединит prefix, все записи и suffix в одну строку.

Паузы и reduced motion

Hover и скрытая вкладка по умолчанию ставят playback на паузу. Focus-пауза срабатывает только при фактическом focus внутри контейнера; стандартная текстовая разметка не создаёт отдельной focus target. При prefers-reduced-motion: reduce длительности анимаций обнуляются, но смена записей по Visible Time продолжается мгновенно.

Responsive

Для prefix, suffix и каждой записи предусмотрены отдельные Desktop Size и Phone Size; mobile breakpoint — 639 px. Текст переносится, но композицию с длинными словами нужно проверить на целевой ширине.

Границы задачи

Элемент не содержит ручной навигации и не перехватывает wheel, swipe или drag. Одновременно видна одна запись; для пользовательского выбора нужен другой паттерн интерфейса.

Загрузки

PHP 8.1+, Joomla 6 и YOOtheme Pro 5.0.43. Рекомендуемое окружение — PHP 8.3+.

Расширение Text Motion Element

Скачать бесплатно

Системные требования

Минимальные

PHP	8.1+
YOOtheme Pro	5
Joomla	6

Поддержать разработку

Отсканируйте QR-код для перехода в сервис пожертвований CloudTips

Ваши пожертвования не облагаются налогом, но сервис берет комиссию за свои услуги.

Максимальная сумма 3000 ₽

Поддержать

Отсканируйте QR-код для перехода в сервис пожертвований Спасибо Мир

Ваши пожертвования не облагаются налогом, но сервис берет комиссию за свои услуги.

Сумма доната не ограничена

Поддержать

Список изменений

Лицензия

GNU General Public License версии 3 или более поздней (GPL-3.0-or-later).

Бесплатно

Скачивание без ограничений
Использование на любом количестве сайтов

Платно

Помощь в установке и настройке
Техническая поддержка
Исправление проблем совместимости со сторонними расширениями и библиотеками
Доработка функционала под конкретные требования заказчика

Загляните в раздел услуг

Text Motion Element