Волнующийся текст

component:wave-text

Компонент анимированного текста. Буквы оборачиваются в отдельные элементы и двигаются по выбранному закону.

  • три режима: волна, вертикальная тряска, диагональная тряска
  • встроенный HTML (жирный, курсив, ссылки) и перенос строки через \n
  • режим jitter — каждая буква двигается по-своему
  • настройка цвета, шрифта, размера, прозрачности, поворота и подчёркивания
  • подчёркивание и ссылки «прилипают» к буквам и двигаются вместе с ними

Быстрый старт

Обязателен только text. Без остальных параметров текст пойдёт плавной волной.

[[include component:wave-text
|text=Ваш текст
]]

Примеры

Нервная вертикальная тряска:

[[include component:wave-text
|text=Нервный текст
|mode=shake-vertical
|jitter=true
|amplitude=6
|speed=0.55
|color=#e05c5c
]]

Крупный заголовок с редкой волной:

[[include component:wave-text
|text=ЗАГОЛОВОК
|amplitude=9
|speed=1.6
|stagger=0.08
|size=32px
|bold=true
|color=#7f5cff
]]

text

Текст компонента. Единственный обязательный параметр. Поддерживает HTML-теги (<b>, <i>, <a href="...">) и перенос строки через \n.

mode

Закон движения. По умолчанию wave.

  • wave — плавная волна
  • shake-vertical — вертикальная тряска
  • shake-diagonal — хаотичная диагональная тряска

amplitude

Размах движения в пикселях. По умолчанию 5. Пример: amplitude=8.

speed

Длительность одного цикла в секундах. Меньше — быстрее. По умолчанию 1.2. Пример: speed=0.5.

stagger

Задержка между соседними буквами в волне, в секундах. По умолчанию 0.05. Больше — волна «растянутее». Пример: stagger=0.1.

wave

Последовательность букв. По умолчанию true — буквы идут поочерёдно. При false все буквы двигаются одновременно.

jitter

Каждая буква получает случайную амплитуду, скорость и фазу. По умолчанию false. Лучше всего раскрывается с shake-vertical и shake-diagonal; на режим wave не влияет.

color / size / font

Цвет, размер и шрифт текста. Принимают любые CSS-значения: color=#7f5cff, size=24px, font=Georgia. Без параметров наследуются от страницы.

bold / italic / underline

Жирный, курсив, подчёркивание. Значения true / false. Подчёркивание применяется к каждой букве и двигается вместе с текстом.

letter-spacing / opacity / rotate

Межбуквенное расстояние (letter-spacing=3px), прозрачность от 0 до 1 (opacity=0.5) и поворот всего блока в градусах (rotate=5).

Автор — Shadow_Ambassador Shadow_Ambassador , доработка — vovawe vovawe

_default: компонент
версия страницы: 23, Последняя правка: 26 Июль 2026, 19:33 (34 дня назад)
Пока не указано иное, содержимое этой страницы распространяется по лицензии Creative Commons Attribution-ShareAlike 3.0 License.