Любой элемент страницы может быть подвержен анимации. Плагин автоматически скрывает элементы до момента анимации и показывает их только когда анимация запускается.
Теперь есть альтернативная функция для анимации текстов - AverinAnimatorText
Скачать CSS фрагмент компонента Скачать JS фрагмент компонента
Прокрутите страницу вниз, чтобы увидеть анимацию элементов:
↓ Прокрутите вниз ↓
data-effect="fadeInUp" data-duration="1500" data-holdsee="1"
Этот элемент появится с анимацией, когда вы доскроллите до него
data-effect="zoomIn" data-duration="1200" data-holdsee="1"
Он тоже появится только когда станет видимым
| Атрибут | Описание | Значения | По умолчанию |
|---|---|---|---|
| data-effect | Название анимации из библиотеки Animate.css или вашей собственной | bounce, flash, pulse, fadeIn, slideInLeft и др. | Обязательный |
| data-duration | Скорость анимации в миллисекундах | Число (500, 1000, 2000 и т.д.) | 1000 мс |
| data-hold | Задержка перед началом анимации в миллисекундах | Число (200, 500, 1000 и т.д.) | 0 мс |
| data-holdsee | Запускать анимацию только при появлении элемента в зоне видимости | 1 (включено) или 0 (выключено) | 0 |
<div data-effect="bounce">
Этот элемент подпрыгнет при загрузке страницы
</div>
<div data-effect="fadeIn" data-duration="500" data-hold="1000">
Этот элемент появится через 1 секунду и анимация будет длиться 0.5 секунды
</div>
<div data-effect="slideInUp" data-holdsee="1" data-duration="1200">
Этот элемент анимируется, когда вы доскроллите до него
</div>
<div data-effect="rotateIn"
data-duration="1500"
data-hold="500"
data-holdsee="1">
Этот элемент появится с поворотом через 0.5 секунды после появления в зоне видимости
</div>
Для работы плагина необходимо подключить jQuery и сам скрипт аниматора:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="path/to/averin-animator.js"></script>
Плагин использует CSS классы для анимации. Рекомендуется подключить Animate.css для использования готовых эффектов:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
Или вы можете создать свои собственные CSS анимации и использовать их в атрибуте data-effect.
Полный список эффектов доступен на официальном сайте Animate.css