component:wave-text
Компонент анимированного текста. Поддерживает:
- три режима движения: волна, вертикальная тряска, диагональная тряска
- встроенный HTML (жирный, курсив, ссылки)
- перенос строки через
\n - настройку цвета, шрифта, размера, прозрачности и поворота
- режим jitter — каждая буква двигается по-своему
БАЗОВЫЙ СИНТАКСИС
[[include component:wave-text |text=Ваш текст ]]
Все параметры кроме text — необязательны. Без параметров текст анимируется волной со стандартными настройками.
ПРИМЕР — ВОЛНА
[[include component:wave-text |text=Плавная волна |mode=wave |amplitude=7 |speed=1.1 |color=#7f5cff |size=22px ]]
ПРИМЕР — ВЕРТИКАЛЬНАЯ ТРЯСКА + JITTER
[[include component:wave-text |text=Нервный текст |mode=shake-vertical |jitter=true |amplitude=6 |speed=0.55 |color=#e05c5c |size=22px ]]
ПРИМЕР — ДИАГОНАЛЬНАЯ ТРЯСКА
[[include component:wave-text |text=Хаотичное движение |mode=shake-diagonal |amplitude=5 |speed=0.7 |color=#2e8b57 |size=22px ]]
ПРИМЕР — СИНХРОННОЕ ДВИЖЕНИЕ (wave=false)
[[include component:wave-text |text=Все вместе |wave=false |amplitude=8 |speed=1.3 ]]
По умолчанию wave=true — буквы идут последовательно, как настоящая волна. При wave=false все буквы двигаются одновременно.
ПРИМЕР — ОФОРМЛЕНИЕ ТЕКСТА
ПРИМЕР — ПОВОРОТ И ПРОЗРАЧНОСТЬ
[[include component:wave-text |text=Немного наискосок |rotate=6 |opacity=0.6 ]]
ПЕРЕНОС СТРОКИ
Используйте \n прямо в тексте:
[[include component:wave-text |text=Первая строка\nВторая строка ]]
Важно: \\n работает только как два символа (обратный слэш + n). Реальный перенос строки в параметре не работает.
HTML ВНУТРИ ТЕКСТА
Внутри text можно использовать HTML-теги. Это работает, если компонент вставлен через [[include]] и движок не экранирует теги.
[[include component:wave-text |text=<b>Жирное</b> и <i>курсив</i> ]]
Ссылки тоже поддерживаются: <a href="...">текст</a> — цвет ссылки наследуется от color.
Параметры
text
Текст компонента.
Поддерживает HTML и перенос строки через \n.
| Тип | строка |
| Обязательный | да |
mode
Тип анимации.
wave— плавная волна (по умолчанию)shake-vertical— вертикальная тряскаshake-diagonal— хаотичная диагональная тряска
| Тип | строка |
| По умолчанию | wave |
amplitude
Высота движения в пикселях.
| Тип | число |
| По умолчанию | 5 |
Пример: amplitude=8
speed
Скорость одного цикла анимации в секундах.
Меньше значение → быстрее движение.
| Тип | число |
| По умолчанию | 1.2 |
Пример: speed=0.5
wave
Управляет последовательностью букв.
true— волнообразный эффект, буквы идут поочерёдноfalse— все буквы двигаются одновременно
| Тип | true / false |
| По умолчанию | true |
jitter
Делает каждую букву уникальной: случайная скорость, амплитуда и фаза.
Хорошо работает с shake-vertical и shake-diagonal.
Не влияет на режим wave.
| Тип | true / false |
| По умолчанию | false |
color
Цвет текста. Принимает любое CSS-значение.
Примеры: #7f5cff · rgb(255,100,0) · red
size
Размер текста.
Примеры: 20px · 1.5rem · 2em
bold / italic / underline
Дополнительное оформление.
| Параметр | Эффект |
bold=true | жирный |
italic=true | курсив |
underline=true | подчёркнутый |
letter-spacing
Расстояние между буквами.
Пример: letter-spacing=3px
font
Шрифт текста.
Примеры: Courier New · Georgia · Impact
opacity
Прозрачность (от 0 до 1).
Пример: opacity=0.5
rotate
Поворот всего блока текста в градусах.
Пример: rotate=5