Компонент для создания красивых текстовых анимаций. Позволяет анимировать текст побуквенно, по словам или по строкам с различными эффектами.
Теперь есть альтернативная функция для анимации элементов - AverinAnimator
<h1 data-text-effect="textFadeUp" data-holdsee="true">
Заголовок с анимацией
</h1>
Анимация запустится при появлении в окне просмотра
<p data-text-effect="textFadeLeft"
data-split-type="words"
data-delay-between="0.1"
data-duration="800">
Анимация по словам
</p>
Анимация по словам
✨ Каждое слово анимируется отдельно с задержкой 0.1с
<div data-text-effect="textBlurReveal"
data-hold="500"
data-stagger="0.05">
Текст с задержкой
</div>
✨ Задержка 500мс перед стартом, каждая буква через 0.05с
<h2 data-text-effect="textRotate"
data-duration="1000">
Вращающиеся буквы
</h2>
✨ Длительность анимации 1 секунда
| Атрибут | Описание | Допустимые значения | По умолчанию | Пример |
|---|---|---|---|---|
data-text-effect |
Тип анимации | textFadeUp textFadeDown textFadeLeft textFadeRight textZoom textBlurReveal textRotate | textRotate | data-effect="textFadeUp" |
data-split-type |
На что разбивать текст |
chars (буквы) words (слова) lines (строки) |
chars | data-split-type="words" |
data-delay-between |
Задержка между элементами (в секундах) | 0.01 - 1.0 | 0.03 | data-delay-between="0.1" |
data-stagger |
Альтернатива delay-between | 0.01 - 1.0 | 0.03 | data-stagger="0.05" |
data-hold |
Задержка перед стартом (в миллисекундах) | 0 - 5000 | 0 | data-hold="500" |
data-duration |
Длительность анимации (в миллисекундах) | 200 - 3000 | 600 | data-duration="1000" |
data-holdsee |
Запускать при появлении в окне | true / false | false | data-holdsee="true" |
data-holdsee работает только если элемент изначально скрыт за пределами экранаdata-split-type="lines" текст должен содержать переносы строки (\n) или теги <br>data-delay-between (менее 0.01) — анимация может быть незаметнойПоявление снизу
data-effect="textFadeUp"
Появление сверху
data-effect="textFadeDown"
Появление справа
data-effect="textFadeLeft"
Появление слева
data-effect="textFadeRight"
Появление с увеличением
data-effect="textZoom"
Появление из размытия
data-effect="textBlurReveal"
Появление с вращением
data-effect="textRotate"
<h1 data-text-effect="bounceIn"
data-split-type="words"
data-duration="1000"
data-holdsee="true">
Анимация из animate.css
</h1>
Вы можете использовать любые анимации из библиотеки Animate.css
<div data-text-effect="textFadeUp"
data-split-type="lines"
data-delay-between="0.2">
Первая строка
Вторая строка
Третья строка
</div>
CSS:
<link href="/css/animatortext.css" rel="stylesheet">
JS (зависит от jQuery):
<script src="/js/jquery.min.js"></script> <script src="/js/animatortext.js"></script>
Или скачайте все компоненты сразу:
<link href="/generatecss.php?components=animatortext,animate" rel="stylesheet"> <script src="/generatejs.php?components=animatortext"></script>
| Анимация не работает | Проверьте подключен ли jQuery и файл аниматора |
| Текст не разбивается | Убедитесь, что атрибут data-text-effect указан правильно |
| Анимация запускается сразу, а не при скролле | Добавьте data-holdsee="true" |
| Буквы "прыгают" | Попробуйте увеличить data-duration или уменьшить data-delay-between |
Хотите больше анимаций? Используйте Animate.css вместе с нашим аниматором!